侧边栏显示

最新推荐文章于 2024-08-27 15:59:21 发布
最新推荐文章于 2024-08-27 15:59:21 发布
阅读量310 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/king911/p/10476388.html
版权

侧边栏显示

 

建表

 点一下子菜单栏就显示  再点一下侧边栏就隐藏

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <title>Title</title>
  6.  
    <style>
  7.  
    li {
  8.  
    list-style: none;
  9.  
    }
  10.  
    </style>
  11.  
    <script src="__STATIC__/jquery.js"></script>
  12.  
    <script language="JavaScript">
  13.  
    $( "ul").hide();
  14.  
    $( document).on('click','div',function(){
  15.  
    $( this).nextUntil('div').toggle();
  16.  
    });
  17.  
    </script>
  18.  
    </head>
  19.  
    <body>
  20.  
    {volist name="data" id="v"}
  21.  
    <div style="background:greenyellow;width: 120px ">{$v.name}</div>
  22.  
    {volist name="arr" id="vo"}
  23.  
    <ul>
  24.  
    {if condition="$v.id eq $vo.pid"}
  25.  
    <li style="background: gold;width: 80px " >{$vo.name}</li>
  26.  
    {/if}
  27.  
    </ul>
  28.  
    {/volist}
  29.  
    {/volist}
  30.  
    </body>
  31.  
    </html>

控制器 方法

  1.  
    public function show()
  2.  
    {
  3.  
    $arr=Db::table( 'power')->where('pid=0')->select();
  4.  
    $res=Db::table( 'power')->where('pid!=0')->select();
  5.  
    return view('show',['arr'=>$res,'data'=>$arr]);
  6.  
    }

 

没点击之前 

点击第一个绿色一个（出现下面的展示）

 点击第二个绿色一个（出现下面的展示）

转载于:https://www.cnblogs.com/king911/p/10476388.html

weixin_30342827
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Qt界面篇：Qt实现侧边栏显示隐藏以及自定义提示框
欧特GO
10-21 8016
最近在工作中需要实现一个Qt的侧边栏，通过按钮控制显示和隐藏，此外还要求实现自定义气泡提示框，最终参考网上知识进行了实现，效果如下： **1、窗口控件大小可以随窗体自由缩放； 2、侧边栏按钮可以控制侧边栏的显示隐藏； 3、侧边栏按钮可以控制侧边栏内容的切换； 4、实现自定义气泡提示框，提示框形状依据需求自绘； 5、鼠标悬停到按钮控件时候可以弹出自定义气泡提示框，移开时提示框消失。
leaflet-sidebar, 用于小叶地图的响应式侧边栏.zip
09-18
leaflet-sidebar, 用于小叶地图的响应式侧边栏 leaflet栏用于小叶插件的响应式侧边栏插件，一个用于交互式地图的JS库。请看一下 sidebar-v2，这个库的标签继承程序。 示例 在 examples 文件夹和Github页面中可以使用以下示例：基本示例ma
侧边栏显示 的 各种效果
weixin_30746117的博客
02-03 314
暂时没有npm 支持 演示 http://www.yyyweb.com/demo/sidebar-transitions/ 效果 http://www.yyyweb.com/ctools/download.php?target=http%3A%2F%2Fwww.yyyweb.com%2Fdemo%2Fsidebar-transitions%2Fsidebar-transitions....
博客侧边栏
banmozhi4419的博客
06-25 217
感谢：https://www.cnblogs.com/hongrunhui/p/7856380.html 页面定制CSS代码 /*以下为隐藏反对*/ .buryit{ display: none; } /*以下为隐藏评论后面的广告和新闻等*/ #ad_t2,#cnblogs_c1,#under_post_news,#cnblogs_c2,#under_post_k...
一个简单的页面侧边栏
weixin_44638167的博客
08-26 1050
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> li{ list-style: none; width: 230px; height: 40px; background-color: #55585a; text-align: center; } a{
侧边栏的使用
weixin_55743273的博客
12-31 1178
文章目录前言一、布局和样式设计二、js效果实现1.js设置2.效果展示 前言 侧边栏是一个网页中比较常见的部件。一般当网页下拉到一个距离时，会弹出一个返回顶部的按钮，在返回顶部时会隐藏这个按钮。 一、布局和样式设计 在页面的右下方固定一个盒子，盒子内容为 布局： <div class="quick"> <a href="" class="onck"> <div class="icon"> <i
android侧边栏
Galesnjak的专栏
02-24 1357
不久前因项目需要，实现类似人人客户端侧滑栏效果，现整理出来分享，相互学习一下。具体的实现思路就不多说了，直接贴代码，有不明白的地方，沙发即可。 1.SlideMenu.java package com.galesnjak.base; import com.galesnjak.utility.Debug; import android.app.Activity; import andr
WPF 侧边栏显示(ListBox+TabControl)
03-19
在本文中，我们将深入探讨如何在Windows Presentation Foundation (WPF) 中实现一个具有侧边栏功能的用户界面，其中结合了ListBox和TabControl，并利用MVVM（Model-View-ViewModel）设计模式来提升代码的可维护性...
React 侧边栏显示二级商品
GotYoung的博客
05-06 243
今天遇到的问题： 问题①：点击侧边栏时相应的商品分类id没有改变； 问题②：侧边栏的id改变了，但是商品显示不出来。 解决问题①：ant 插件库的使用错误：onChange事件应当设置在SideBar 标签，我把它放在了SideBar.Item；且onChange 的回调应当与SideBar.Item 的key值 保持一致（key值也就是商品分类的id） 问题②：侧边栏的id改变了，但是商品显示不出来。 解决问题②：一开始我是用createSelector 去做分类的改变 响应 商品的..
jQuery实现侧边栏隐藏与显示的方法详解
10-17
在Web开发中，利用jQuery实现页面元素如侧边栏的隐藏与显示是非常常见的需求，可以通过简单的代码实现复杂的动态效果。 本文将详细介绍使用jQuery来实现侧边栏隐藏与显示的具体方法，这些技巧涵盖了页面布局的组织...
idea导入项目不显示maven侧边栏的问题及解决方法
08-18
idea导入项目不显示maven侧边栏的问题及解决方法 本文主要介绍了idea导入项目不显示maven侧边栏的问题及解决方法，并提供了详细的解决步骤和相关git操作方法，对大家的学习或工作具有一定的参考借鉴价值。 一、...
侧边栏
diankui6178的博客
10-28 104
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title&...
网页中固定侧边栏
qq_44212319的博客
07-26 3183
网页中固定侧边栏demo 1.介绍 该练习是
博客侧边栏——装饰
weixin_33798152的博客
05-25 186
　设置方法，进入博客园后台，选择设置界面，在侧边栏下粘贴喜欢的装饰下的代码（需要支持html,js）。 来自： http://abowman.com/ <object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/hamst...
页面侧边栏不溢出加载
黑猫几绛的博客
01-15 418
首先看一下成品效果。 在网页中侧边栏可以起到很好的导航效果，但是当有很多导航链接时便会产生溢出/出现滚动条。 下面介绍解决办法： 出现了溢出时一般采用overflow: hidden来解决，这里也是一样。在侧边栏的容器外再嵌套一层容器，外部容器设置overflow: hidden，包裹容器设置overflow-y: scroll; overflow-x: hidden; 此时内部容器由于内容溢出会产生滚动条，但是会被最外层容器隐藏掉。 接下来设置外部容器的宽度小于包裹容器的宽度，让鼠标事件
JavaScript + CSS/CSS3 + HTML 侧边栏界面设计
热门推荐
XHChen的博客
02-02 2万+
下文将介绍两种侧边栏的界面设计，一种是在页面的右边显示侧栏内容；另一种是在页面左边显示侧栏，同时主体内容随着侧栏的出现整体向右移动。   右侧边栏界面设计 在撸码开始前先来看看效果图： 右边侧栏的页面设计组成包含打开按钮、右侧栏（原始状态为隐藏，既 width = 0）、几个标签内容、关闭按钮等。通过点击事件显示右边侧栏（既改变侧栏 width 的值）。效果图明显有一个延迟显示的控制，...
wordpress不同页面侧边栏设置方法
Free-Thinking
08-11 4465
我们在wordpress主题开发过程中，有时候需要对不同的页面设计不同的侧边栏，我们先看下实现的最终效果如下图： 在上图我们可以看到，首页与文章页的侧边栏是分开的，这样我们可以很好的控制想显示的内容。 那这种效果如何实现呢？方法如下： 1、在主题的functions.php文件中添加如下代码： if ( function_exists('register_sidebar') ) {
基于vue框架的病床管理信息系统odt4v（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
最新发布
h2345678的博客
08-27 955
因此，开发一套集医疗人员、物流人员、病床信息及使用记录等功能于一体的病床管理信息系统，成为提升医院管理水平、优化资源配置、增强患者满意度的迫切需求。第三阶段：2024年4月1日－2024年4月30日，完成系统分析，设计，编码，测试等工作，同时完善文献综述及外文翻译，完成论文初稿；第二阶段：2024年3月10日－2024年3月31日，查阅资料，调研系统需求，熟悉课题所需要的编译软件、数据库和设计语言等；第一阶段：2023年1月11日－2024年3月9日， 确定毕设题目，查阅资料，完成开题报告，进行开题答辩。
若依框架侧边栏显示原理
07-27
框架侧边栏的显示原理可以根据具体的框架来进行讨论，不同的框架可能有不同的实现方式。一般来说，框架侧边栏的显示原理可以分为以下几个步骤： 1. 布局设计：框架侧边栏的显示需要在整体布局中进行设计，一般会将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值