`

JQuery实现树形菜单

jQueryCSSJavaScriptHTML 
阅读更多

jqueryMenu.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Menu</title>
     <script type="text/javascript" src="jslib/jquery1.5.js"></script>
    <script type="text/javascript" src="jslib/jquerymenu.js"></script>

    <link type="text/css" rel="stylesheet" href="css/menu.css" />
</head>
<body>
    <ul>
       <a href="#">菜单1</a>
        <li><a href="#" id="JqueryWindow.html" >子菜单1</a></li>
        <li>子菜单2</li>
    </ul>
    <ul>
        <a href="#">菜单2</a> 
        <li>子菜单3</li>
        <li>子菜单4</li>
    </ul>
    <div id="content"></div>
</body>
</html>

 jquerymenu.js

//注册页面装载时执行的方法
$(document).ready(function(){
    var as=$("ul>a");
    as.click(function(){
       //这里需要找到ul中的li，然后让li显示出来
        var aNode=$(this);
        var lis=aNode.nextAll("li");
        //toggle()方法，改变显示状态
        lis.toggle("slow");
    });
    $("li>a").click(function(){
       $("#content").load($(this).attr("id")); 
    });
});

 menu.css

li{
    list-style:none;      /*去掉li前的点*/
    margin-left:20px;     /*调整距离*/
    display:none;
}


 
1
顶
0
踩
分享到：
| JQuery实现窗口淡入淡出
评论
3 楼 wustrive_2008 2011-04-07  
其实就是很普通的一个树型菜单：   
菜单1
     子菜单1
     子菜单2

菜单2
     子菜单3
     子菜单4
2 楼 sjrhero 2011-04-07  
  • 想看图
1 楼 bangyan2003 2011-04-03  
想看看图
发表评论

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

相关推荐

    jQuery实现树形菜单

    利用jQuery实现树形菜单，能够使开发者更高效地创建交互式的菜单系统。 首先，我们需要了解jQuery的基本概念。jQuery通过选择器选取HTML元素，然后应用方法来改变这些元素的属性或内容。例如，`$("ul li")`会选择...

    jquery实现树形菜单

    打开jquery\demo\cn\index.html 1.可显示连线、不连线或自定义图标 2.可以实现有复/单选框功能 3.可以实现能够拖拽的节点（用zTree移动复制节点） 等等.... 基本上平常使用到的树形菜单功能都有demo

    使用jquery实现树形菜单

    在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统，其中左侧的主菜单使用的是 easyui 中的 ...SimpleTree使用起来比较方便，它实现了最基本的树形菜单的功能，包括1个JS文件、1个CSS文件和5个图标文件。

    Jquery实现树形菜单.html

    jquery实现树形菜单deml静态页,简单调用

    jquery 树形菜单

    在jQuery中实现树形菜单，通常依赖于第三方插件，例如本示例中提到的“zTree”。zTree是一款优秀的jQuery插件，专门用于构建可自定义、功能丰富的树形菜单。它支持多主题、拖放操作、节点权限控制等多种特性，适用于...

    jquery实现树形菜单完整代码

    总结起来，使用jQuery实现树形菜单的关键步骤包括： 1. 创建HTML结构，用嵌套的`&lt;ul&gt;`和`&lt;li&gt;`表示菜单层级。 2. 使用CSS定义样式，包括菜单项的外观和交互效果。 3. 使用jQuery处理用户交互，如点击事件，控制子...

    jQuery树形菜单插件

    3. **jQuery实现树形菜单**： 实现jQuery树形菜单通常涉及以下步骤： - **HTML结构**：首先，创建基本的HTML结构，包含需要展开和折叠的列表项。 - **CSS样式**：设计菜单的视觉样式，如颜色、字体、边框等。 - ...

    Jquery树形菜单

    ### 三、jQuery实现树形菜单的步骤 1. **HTML布局**：首先，我们需要创建一个基本的HTML结构来表示菜单。这通常包括一系列的`&lt;ul&gt;`和`&lt;li&gt;`元素，其中`&lt;li&gt;`元素表示菜单项，`&lt;ul&gt;`元素表示子菜单。 2. **CSS样式*...

    Jquery 树形菜单

    本篇文章将深入探讨如何使用jQuery实现树形菜单，包括基本概念、实现方式和示例代码。 ### 1. 基本概念 树形菜单的核心是HTML结构，通常由`&lt;ul&gt;`和`&lt;li&gt;`标签组成，通过CSS样式和JavaScript进行交互控制。每个`...

    jquery树形菜单例子

    在本文中，我们将深入探讨如何使用jQuery来创建和操作树形菜单，以及如何利用特定的jQuery插件——jQuery Light Treeview。树形菜单在网页设计中广泛应用，它们为用户提供了一种有组织的方式来浏览和导航层次结构的...

    jQuery展开收缩树形菜单代码.zip

    这个代码库的核心功能是通过jQuery实现树形菜单的展开和收缩。当用户点击某个节点时，其子节点会相应地显示或隐藏，提供了良好的用户体验。同时，集成的搜索功能使得用户无需逐层浏览，只需输入关键词即可筛选出相关...

    jquery拖拽树形菜单

    本文将详细讲解如何利用jQuery实现拖拽功能，并将其应用于树形菜单，帮助你创建交互性强、用户体验良好的Web应用。 一、jQuery基础 jQuery的核心理念是“Write Less, Do More”，通过封装JavaScript的常用功能，使...

    jquery左侧树形菜单

    本教程将详细介绍如何使用jQuery实现一个功能完备、样式齐全的左侧树形菜单。 首先，我们需要理解jQuery的基本概念。jQuery简化了JavaScript的DOM操作，提供了一套简洁的API，使得开发者可以轻松地处理事件、动画和...

    JQuery 实现XML树形菜单

    \n\n总之，使用jQuery和XML实现树形菜单是一种实用的方法，它结合了XML的数据描述能力和jQuery的交互性，为用户提供了一种直观且可定制的界面。通过逐步优化和扩展，可以创建出符合各种需求的动态树形菜单系统。

    s2sh+freemarker+jquery+jquery-treeview 无限级树形菜单.rar

    本项目“s2sh+freemarker+jquery+jquery-treeview 无限级树形菜单”就是这样一个解决方案，它整合了多种技术来实现这一功能。 首先，我们来看“s2sh”。这是Struts2、Spring和Hibernate三者的简称，它们分别是MVC...

    JQuery实现的树形菜单，类似邮箱功能树

    在这个项目中，"JQuery实现的树形菜单，类似邮箱功能树"是一个利用JQuery创建的互动式树状导航菜单，其设计灵感来源于常见的邮箱应用中的目录结构。 树形菜单是一种层次化的展示方式，常用于文件管理器、网站导航和...

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