`

自己制作的简单树菜单

tree 
阅读更多
<title>树形效果</title>
<style type="text/css">
ul li span{
cursor:pointer;
}
ul{
list-style:none outside none;
}

.expended{
list-style-image: url('daohang.jpg');
}
.collapsed{

}
</style>
</head>
<ul class="tree">
  <li class="expended">
      <span>衬衫</span>
            <ul>
            <li><a href="#">短袖衬衫</a></li>
                    <li>长袖衬衫</li>
            </ul>
      </li>
  <li  class="expended">
      <span>鞋子</span>
            <ul>
            <li>翻毛鞋子</li>
                    <li>光皮鞋子</li>
            </ul>
      </li>
  <li  class="expended">
      <span>裤子</span>
            <ul>
            <li>七分短裤</li>
                    <li>长裤</li>
            </ul>
      </li>
</ul>
<body>
</body>
<script src="../../jquery-1.7.2.js"></script>
    <script language="javascript">
$(function(){

$('.tree > li > span').click(function(){
  //$(this).siblings('ul').toggle(  });
  var ul = $(this).siblings('ul');
  if(ul.is(':visible')){
    ul.parent().removeClass().addClass('collapsed');
    ul.hide();
  }else{
  ul.parent().removeClass().addClass('expended');
  
  ul.show();
  }
});
});
</script>
</html>
分享到：
| 自己制作的简单tab效果
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    示例制作简单的树形菜单

    以上就是使用JavaScript制作简单树形菜单的基本过程。当然，实际应用中可能需要考虑更多的细节，如样式、动画效果、无障碍访问等。通过扩展这个基础示例，你可以创建出满足项目需求的复杂树形菜单系统。

    HTML树形菜单

    HTML树形菜单是一种常见的网页交互元素...在实际开发中，开发者可能会根据需求选择不同的实现方式，从简单的纯JavaScript实现到使用成熟的前端框架，如React、Vue或Angular，来构建更复杂、功能更丰富的树形菜单组件。

    用TreeView实现树菜单

    在本案例中，我们将通过一个具体的例子来说明如何构建一个简单的树形菜单。 #### 二、数据库设计 首先，我们需要定义一个表`S_Menu`来存储菜单项的数据。表结构如下： - `NodeId`：菜单项的唯一标识符。 - `...

    JS制作的树形菜单

    例如，使用jQuery实现一个简单的树形菜单可以这样开始： ```javascript $(document).ready(function() { var data = [ { text: '父节点1', children: [{ text: '子节点1' }, { text: '子节点2' }] }, { text: '父...

    树形导航菜单

    在树形导航菜单的实现中，jQuery提供了强大的DOM操作、事件处理和动画效果，使得动态创建和控制树形结构变得简单。 要使用jQuery创建树形导航菜单，我们首先需要一个HTML结构，这个结构通常包括`&lt;ul&gt;`和`&lt;li&gt;`元素...

    C# 窗体中使用树形菜单的简单实例

    在C#编程环境中，创建和使用树形菜单是构建用户界面时常见的任务，尤其是在开发桌面应用程序时。树形菜单提供了一种层次结构的视图，允许用户以递归方式查看和操作数据。以下是一个关于如何在C#窗体中实现树形菜单的...

    (推荐)超级漂亮的JS树形菜单

    描述中提到的“已封装，简单易用”，意味着这个JS树形菜单库已经过优化，开发者可以快速集成到自己的项目中，而无需深入了解复杂的实现细节。这通常涉及到提供清晰的API接口、简单的初始化步骤以及详尽的文档支持。 ...

    一个简单的JS树形菜单

    为了实现这个简单的JS树形菜单，我们需要做以下几步： 1. **引入依赖**：首先，确保在HTML文件中引入jQuery库和jQuery_z_tree的CSS及JS文件。这可以通过CDN链接或本地文件路径完成。 2. **准备数据**：定义一个...

    左侧黑色树形导航菜单

    在IT行业中，构建一个高效的用户界面是至关重要的，特别是对于...无论是新手还是经验丰富的开发者，都可以通过下载、解压和简单改造，将这个组件无缝集成到自己的项目中，提升用户体验，同时也节约了开发时间和成本。

    nodejs做的一个树形菜单框架和数据库文件

    在这个特定的项目中，"nodejs做的一个树形菜单框架和数据库文件"是一个利用Node.js构建的系统，它实现了树形菜单结构，这种结构常用于Web应用程序的左侧导航栏，以组织和展示多级的菜单项。用户可以通过点击这些菜单...

    树形菜单、用JS配合Struts1.2、Spring2。0、Ajax2.0的树形菜单

    这个系统不仅提供菜单展示，还涉及到了角色的添加和修改功能，可以说是一个简单但实用的角色分配系统。 首先，让我们深入了解一下这些技术： 1. **JavaScript**：这是一种广泛使用的客户端脚本语言，用于增强网页...

    用js制作的树形菜单可刷新

    这个"用js制作的树形菜单可刷新"项目提供了一个简洁且可扩展的解决方案，特别适用于那些需要显示多级目录结构或者有层次关系的信息的网页应用。 首先，我们来看看项目的组成部分： 1. **dtree.css**：这是样式表...

    jquery树形菜单

    "jquery树形菜单"是一个利用jQuery实现的交互式树形菜单组件，它提供了可折叠和收缩的功能，使得网页中的导航更加直观和用户友好。 树形菜单通常用于展示层级结构的数据，比如网站目录、文件系统或组织结构。通过...

    很漂亮的一套树形菜单

    本教程将深入讲解如何制作一个漂亮的树形菜单，并提供实际的源代码供学习参考。 1. **树形菜单的基本概念** 树形菜单，顾名思义，其布局形式类似树木的分枝结构，每个节点可以包含子节点，形成层级关系。在网页中...

    Dtree动态树菜单

    总之，Dtree动态树菜单是一个强大的工具，它使得在Web应用中构建和管理复杂的层次结构变得简单易行。通过对Dtree的理解和运用，开发者可以为用户提供直观且高效的导航体验，同时实现灵活的权限控制。

    SSH+Dwr制作的树形菜单，简单明了，一看就懂！

    开发过程中，Struts2处理用户请求，Spring协调整个应用，Hibernate处理数据库操作，而Dwr则提供了前后端之间的实时通信，使得菜单的动态加载和展开变得简单直观。这样的组合为用户提供了流畅的体验，同时降低了...

    用jquery制作菜单树

    在网页开发中，创建交互式的菜单树是一种常见的需求，它能有效地组织和展示大量数据，提高用户的导航体验。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果。而`jQuery-zTree`则是一个...

    Jquery 树形菜单

    在IT行业中，jQuery是一款广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理以及动画制作。Jquery树形菜单则是jQuery应用的一个经典示例，它主要用于构建可交互的、层次分明的导航结构，常见于网站的侧边栏...

    jquery树形导航菜单插件制作滑动多级二级下拉菜单展示

    在制作树形导航菜单时，我们通常会利用jQuery的事件监听、CSS选择器和动画效果等特性。 1. **结构设计**：创建HTML结构是构建导航菜单的第一步。一个基本的二级下拉菜单可能包含`&lt;ul&gt;`和`&lt;li&gt;`元素，其中`&lt;li&gt;`用于...

    dtree树形菜单(有带checkbox实现)

    本工程使用dTree组件实现树形菜单的展示 有静态树形菜单和动态(从数据库获取数据)树形菜单展示两种 ...菜单既有普通的树结构展示,也有方便做权限等功能的带选择框的展示(含带默认选中checkbox的处理)

Magicbox
Global site tag (gtag.js) - Google Analytics