折叠（树形导航栏）

最新推荐文章于 2020-10-15 15:36:33 发布
最新推荐文章于 2020-10-15 15:36:33 发布
阅读量219 收藏 1
点赞数
文章标签： 开发工具 javascript ViewUI
原文链接：http://www.cnblogs.com/TTTK/p/6297870.html
版权 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>4_竖向折叠导航菜单_1</title>
  <style type="text/css">
    /*全局设定*/
    .nav{position: absolute;top:100px;left: 100px;}
    *{margin: 0;padding: 0;font-size: 14px;font-size: "微软雅黑";}
    ul{list-style: none;}
    .nav a{text-decoration: none;display: block;width: 135px;height: 30px;line-height: 30px;color: #fff;text-align: center;}    
    /*一级列表设定*/
    .a1{font-size: 16px;height: 35px;line-height: 35px;}
    .nav{background-color: #888;}
    .li0{border-top: 2px solid #bbb;}
    .li0:first-child{border: 0;}
    /*二级列表设定*/
    .nav1{display: none;background-color: #bbb;}
    /*伪类*/
    .li0:hover .a1{background-color: #444;font-weight: bold;font-size: 17px;}
    .nav1 a:hover{background-color: #f60;font-weight: bold;font-size: 15px;}
  </style>
</head>
<body>
  <ul class="nav">
    <li class="li0"><a class="a1" href="javascript:myclick1()">草帽海贼团</a>
      <ul class="nav1" id="nav101">
        <li class="li1"><a href="">路飞</a></li>
        <li class="li1"><a href="">索隆</a></li>
        <li class="li1"><a href="">山治</a></li>
      </ul>
    </li>
    <li class="li0"><a class="a1" href="javascript:myclick2()">海军</a>
      <ul class="nav1" id="nav102">
        <li class="li1"><a href="">黄猿</a></li>
        <li class="li1"><a href="">青雉</a></li>
        <li class="li1"><a href="">赤犬</a></li>
      </ul>
    </li>
    <li class="li0"><a class="a1" href="javascript:myclick3()">现任王下七武海</a>
      <ul class="nav1" id="nav103">
        <li class="li1"><a href="">汉库克</a></li>
        <li class="li1"><a href="">米霍克</a></li>
        <li class="li1"><a href="">熊</a></li>
        <li class="li1"><a href="">巴基</a></li>
        <li class="li1"><a href="">白胡子二世</a></li>

      </ul>
    </li>
    <li class="li0"><a class="a1" href="javascript:myclick4()">革命军</a>
      <ul class="nav1" id="nav104">
        <li class="li1"><a href="">龙</a></li>
        <li class="li1"><a href="">萨博</a></li>
        <li class="li1"><a href="">人妖王</a></li>
      </ul>
    </li>
    <li class="li0"><a class="a1" href="javascript:myclick5()">现任四皇</a>
      <ul class="nav1" id="nav105">
        <li class="li1"><a href="">香克斯</a></li>
        <li class="li1"><a href="">凯多</a></li>
        <li class="li1"><a href="">玲玲</a></li>
        <li class="li1"><a href="">蒂奇</a></li>

      </ul>
    </li>
  </ul>
  <script>
    var arr2 =document.getElementsByClassName('nav1');
    function allNone(){
      //事件开始的时候的状态
      for(var i = 0 ; i < arr2.length;i++){
        arr2[i].style.display = 'none';
      }
    }
    //单机第一个
    function myclick1(){
      var x = document.getElementById('nav101');
      if(x.style.display=='block'){
        x.style.display = "none";
      }else{
        allNone();
        x.style.display ='block';
      }
    };
    function myclick2(){
      var x = document.getElementById('nav102');
      if(x.style.display=="block"){
        x.style.display = "none";
      }else{
        allNone();
        x.style.display = 'block';
      }
    }
  </script>
  
</body>
</html>

 

转载于:https://www.cnblogs.com/TTTK/p/6297870.html

weixin_30763397
关注
树状导航栏
luoruihua2017的博客
07-11 1721
是很常用简单的js代码，但用多了Ztree等插件实现树状导航栏，就一点乐趣都没有了。一个函数即可搞定，话不多说上代码：window.onload = function() {    var tree = document.getElementById("tree");    var lis = tree.getElementsByTagName("li");    for(var i = 0; i...
树形导航栏（折叠）（jquery）
weixin_30908941的博客
01-18 145
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>4_竖向折叠导航菜单_1</title> <style type="text/css"> /*全局设定*/ .nav{position: absol...
Css3折叠菜单-可展开的树形导航菜单.rar
07-10
Css3折叠菜单-可展开的树形导航菜单，其实就是折叠、展开式的菜单，应用了HTML5重绘而成，无使用jquery，完全CSS3技术实现，面向Android手机等移动终端设备浏览，请注意不要使用IE等浏览器查看效果。
web页的树形导航栏
08-26
web页的树形导航栏，供大家开发b/s时使用！
Python3.x+Pyqt5实现界面左侧树形导航栏
07-30
Python3.x+Pyqt5实现界面左侧树形导航栏；主要用到的工具是Pyqt5的QTreeWidget。
（续2）Python3.x+Pyqt5实现主窗体里树形导航栏按钮驱动分割器QSplitter动态载入多个子窗体，且第3个子窗体还实现了界面与业务逻辑分离
08-09
在本项目中，我们主要探讨如何使用Python3.x和PyQt5库来构建一个具有树形导航栏的主窗体，以及如何通过按钮驱动QSplitter动态加载多个子窗体。此外，还将介绍如何实现第3个子窗体的界面与业务逻辑分离，以提高代码的...
LABVIEW树形导航栏.zip
10-24
5. **代码逻辑**：在“树形导航栏.vi”中，还包含了处理节点添加、删除、展开、折叠以及复选状态改变等操作的代码逻辑。这部分逻辑可能涉及到复杂的数据操作和界面同步，需要理解LABVIEW的编程原理和控件间的通信...
可折叠树形菜单代码（带搜索功能）
01-09
这个“可折叠树形菜单代码（带搜索功能）”是为了解决这一需求而设计的，它结合了jQuery库的便利性和搜索功能的实用性，为用户提供了一种高效、直观的方式来浏览和查找复杂的数据结构。 首先，我们来看看核心组件...
Python3.x+Pyqt5实现主窗体里QToolBox导航栏抽屉效果和树形导航，以及QSplitter用QToolBox导航栏抽屉效果动态载入子窗体
08-05
Python3.x+Pyqt5实现主窗体里QToolBox导航栏抽屉效果和树形导航，以及主窗体里的分割器QSplitter用QToolBox导航栏抽屉效果动态载入子窗体。
导航栏（横向、竖向折叠）
03-20
从网上下载整理的里面有二十几种特效，适合各种网站的导航，很实用的并且效果很好看
页面一个树形导航
06-20
这是我自己在做系统时使用到的导航栏，我自己感觉比较好用，所以分享给大家
漂亮的树形导航菜单.rar
07-04
漂亮的树形导航菜单
18个精心整理的树形导航菜单
08-23
精心整理各种导航菜单，值得学习和推荐！稍微修改即可利用！div+css+js实现菜单的收缩与展开QQ菜单可折叠，JS+CSS很漂亮爆炸式菜单，点击后展开标签在左侧的CSS竖向简洁选项卡。
js树形导航菜单制作垂直js导航条特效
04-09
js树形导航菜单制作一个垂直纵向js导航条只设置导航二级菜单分类，点击显示隐藏二级菜单目录。内含js代码下载。
用XSLT轻松实现树形折叠导航栏(转)
csdn785029689的博客
05-12 190
一般我们见到的XML文件是以元素为结点的，随着层次的不断加深，逐渐成了一棵树，这种文件的好处是我们一看就很明白其中的子、父、祖宗、兄弟关系，不方便之处在于，我个人认为，如果层次很深又有很多的兄弟结点的话，那么文件可能很大而影响处...
树形导航栏，由树形数据生成导航栏。
gaozhihui1026的博客
10-15 935
最近做一个小项目，中间有一个需求是，把后台返回的树形数据生成为导航栏格式，怪我愚笨，搜了好多也没看懂。于是自己写了一个，以备以后用到。 首先，后台返回的树形数据为较为简单的二层结构。名为 data data：[ { id: "3e7e4c97720d4f01af5131faf4f1848d", label: "一号楼", children: [ { id: "3e7e4c97720d4f01af5131faf4f1848d", label: "101" },
树形导航菜单
shuizhongyue_的专栏
06-22 410
原文出处http://renzhen.iteye.com/blog/1329949 想写树形导航菜单，然后各种百度，这里涉及到引用传递，写的蛮好的 /* 通过数据库获取所有元素，通过下面函数构造树形结构 */ private function getTree($menus) { $id = $level = 0; $menuobjs=array(); $...
qt 导航栏树形结构
最新发布
08-23
Qt是一个跨平台的应用程序开发框架，它提供了丰富的组件和工具，用于快速构建现代化的图形用户界面。在Qt中，导航栏可以通过使用树形结构来实现。 树形结构是一种层级结构，常用于表示有父子关系的数据。在导航栏中，使用树形结构可以方便地组织和展示多级菜单或目录。 要实现一个基于树形结构的导航栏，我们可以使用Qt提供的一些相关类和组件。首先，我们可以使用QTreeView组件作为导航栏的主界面。QTreeView是一个用于显示树形结构的可视组件，它可以在其内部生成树形结构的视图。 接下来，我们需要定义一个数据模型来存储和管理树形结构的数据。在Qt中，常用的数据模型类是QStandardItemModel。QStandardItemModel是一个预定义的数据模型，可以用于管理带有父子关系的数据。我们可以通过添加QStandardItem来构建树形结构，并使用setItem方法设置父子关系。 在QTreeView中，我们可以使用setModel方法将QStandardItemModel设置为其数据模型，并使用expandAll方法展开所有节点。我们还可以使用QTreeView的一些信号和槽函数来实现节点的展开和折叠，以及与节点相关的操作。 总结起来，通过利用Qt中的QTreeView和QStandardItemModel，我们可以很方便地实现一个导航栏树形结构。我们可以根据需要添加和管理树形结构的节点，实现导航栏的功能。同时，Qt提供的丰富的UI组件和事件机制，也可以让我们进一步定制和优化导航栏的实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值