`

jquery二级菜单例子--seven

jQueryCSSXHTMLHTML 
阅读更多
    今天看到了一个jquery二级菜单的例子，就学习了，看了效果挺好，可是，想做一个三级菜单，怎么做呢，尝试了好多种办法还是没有成功，希望看到此文的热心朋友，会的话留下言哈·· 谢过了~~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery二级菜单</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
   $(function(){
      $("#container .menu1 ul li").click(function(){
          var index=$("#container .menu1 ul li").index(this);
  $(this).addClass("bg").siblings().removeClass();
  $("#container .menu2 ul li ul").eq(index).show().parent().siblings("li").children("ul").hide();
   })
   })
</script>
<style type="text/css">
body{ margin:0; padding:0; font-family:"宋体"; font-size:9pt; color:#abcdef; font-weight:bold}
#container{ width:800px; height:auto; margin:0 auto; border:10px #1025c0 solid}
#container .menu1{ width:800px; height:40px; border:none; background:url(/image/1.gif) no-repeat}
#container .menu1 ul{ margin:0; padding:0; position:relative; padding-top:5px;}
#container .menu1 ul li{ float:left; padding-left:10px; height:35px; width:80px; line-height:35px; list-style:none; text-align:center; cursor:pointer}
#container .menu2{ width:800px; height:35px; border:none; background-color:#765456;}
#container .menu2 ul{ margin:0; padding:0}
#container .menu2 ul li{ height:35px; line-height:35px; list-style:none; float:left; cursor:pointer}
#container .menu2 ul li ul li{ float:left; padding-left:30px; height:35px; line-height:35px; list-style:none}
.bg{ background-color:#557667}
.hide{ display:none}
</style>
</head>

<body>
<div id="container">
<div class="menu1">
<ul>
<li class="bg">第一栏</li>
<li>第二栏</li>
<li>第三栏</li>
<li>第四栏</li>
<li>第五栏</li>
</ul>
</div>
<div class="menu2">
<ul>
<li>
<ul>
<li>第一栏</li><li>第一栏</li><li>第一栏</li>
</ul>
</li>
<li>
<ul class="hide">
<li>第二栏</li><li>第二栏</li><li>第二栏</li>
</ul>
</li>
<li>
<ul class="hide">
<li>第三栏</li><li>第三栏</li><li>第三栏</li>
</ul>
</li>
<li>
<ul class="hide">
<li>第四栏</li><li>第四栏</li><li>第四栏</li>
</ul>
</li>
<li>
<ul class="hide">
<li>第五栏</li><li>第五栏</li><li>第五栏</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>


三级菜单我是这么做的：
1、在js代码里面加上：
var twoIndex = ${"#container .menu2 ul li ul li "}.index(this);
  $(this).addClass("bg").siblings().removeClass();
  $("#container .menu3 ul li ul li ul").eq(twoIndex).show().parent().siblings("li").children("ul").hide();

2、在css里面加上：
#container .menu3{ width:500px; height:35px; border:none; background-color:blue;}
#container .menu3 ul{ margin:0; padding:0}
#container .menu3 ul li{ height:35px; line-height:35px; list-style:none; float:left; cursor:pointer}
#container .menu3 ul li ul li{ float:left; padding-left:30px; height:35px; line-height:35px; }

3、在html里加上了：
<div class="menu3" class="hide">
<ul>
<li>
<ul>
<li>
<ul class="hide">
<li>3级第一栏</li><li>3级第一栏</li><li>3级第一栏</li>
</ul>
<ul class="hide">
<li>31</li><li>31</li><li>31</li>
</ul>
</li>
</ul>
</li>
<li>
<ul class="hide">
<li>
<ul class="hide">
<li>3级第二栏</li><li>3级第二栏</li><li>3级第二栏</li>
</ul>
<ul class="hide">
<li>32</li><li>32</li><li>32</li>
</ul>
</li>
</ul>
</li>
<li>
<ul class="hide">
<li>3级第三栏</li><li>3级第三栏</li><li>3级第三栏</li>
</ul>
<ul class="hide">
<li>
<ul class="hide">
<li>33</li><li>33</li><li>33</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

希望有想法的朋友可以留下你们宝贵的意见~~~~
分享到：
| jquery验证码的例子--six
评论
发表评论

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

相关推荐

    jquery.datepicker-zh-CN.js

    &lt;script src="./public/js/jquery-ui-1.10.3.min.js"&gt; &lt;script src="./public/js/jquery.datepicker-zh-CN.js"&gt;&lt;/script&gt; &lt;link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"&gt; $( "#...

    jquery二级菜单

    "jQuery"是一个广泛使用的JavaScript库，它为创建动态和交互式的网页提供了强大工具，其中包括二级菜单的实现。本教程将深入探讨如何使用jQuery来构建二级菜单。 首先，我们需要理解jQuery的基本概念。jQuery简化了...

    下拉菜单jquery.editable-select-master

    《深入解析jQuery.editable-select-master下拉菜单插件》 在网页开发中，下拉菜单是一种常见的交互元素，用于提供用户选择操作或展示大量数据。jQuery.editable-select-master是一款基于jQuery的可编辑下拉菜单插件...

    插件jquery-ui-timepicker-addon.js

    jquery插件jquery-ui-timepicker-addon.j

    angular和jquery例子--IntegralUI-Studio-Web-TRIAL

    Angular 是一个全面的框架，用于构建单页应用程序（SPA），而 jQuery 是一个轻量级的库，简化了 DOM 操作、事件处理和动画效果。在"angular和jquery例子--IntegralUI-Studio-Web-TRIAL"这个压缩包中，我们可能会找到...

    jquery.qtip-1.0.0-rc3.js

    jquery.qtip-1.0.0-rc3.js 弹出层

    jquery树形菜单例子

    接下来，我们要介绍的jQuery Light Treeview插件是一个轻量级的解决方案，用于快速构建美观且功能丰富的树形菜单。这个插件的版本是1.0.0，它提供了一套简单的API和自定义选项，以便开发者根据需要进行定制。 要...

    jquery.ui.datepicker-zh-CN.js

    jquery-ui中文日历控件，使用的时候记得先把文档编码改为UTF-8，否则中文显示乱码！

    jquery实现二级菜单

    本主题将深入探讨如何使用jQuery来实现二级菜单，这是一种常见的网页交互效果，能帮助用户更高效地探索网站内容。 jQuery是一个强大的JavaScript库，它简化了JavaScript的DOM操作、事件处理以及动画效果。在实现二...

    jquery特效菜单--透明度切换

    &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; ``` 2. **定义HTML结构**：创建一个包含多个菜单项的无序列表，每个列表项将作为透明度切换的对象。 ```html 菜单1 菜单2 菜单3 ... `...

    jquery-3.7.0.min.js（jQuery下载）

    jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...

    jquery-ui-dialog-demo

    `jquery-ui-dialog-demo` 是一个基于 jQuery UI 库的弹出窗口插件示例，它提供了丰富的交互式对话框功能，包括模拟原生 JavaScript 的 `alert` 和 `confirm` 对话框以及自定义的打开（open）模式。这个插件使得在...

    jQuery鼠标经过二级菜单下拉代码.zip

    "jQuery鼠标经过二级菜单下拉代码"是一个专门针对这种需求设计的代码实现，它利用jQuery库和CSS3技术，实现了鼠标悬停时自动展开二级菜单的效果，为用户提供了流畅、直观的导航体验。 首先，jQuery是一个轻量级的...

    使用CSS+jQuery实现的水平二级菜单

    "使用CSS+jQuery实现的水平二级菜单"是一个常见的技术实践，它结合了层叠样式表（CSS）的样式控制与JavaScript库jQuery的动态效果，以实现优雅且功能丰富的菜单系统。下面将详细介绍这个主题中的相关知识点。 首先...

    jQuery-File-Upload-9.11.2(完整版，插件已下载).zip

    jQuery-File-Upload-9.11.2(完整版，插件已下载),官方的很多引用文件都是线上的，加载很慢，下载到本地后更靠谱，这个版本是已经整理好的，直接调用后台php的部分也在其中，可以直接应用到项目中，直接拷贝过去就...

    jQuery个性动画二级下拉导航菜单.rar

    当用户将鼠标悬停在一级菜单项上时，对应的二级菜单会通过动画效果平滑地展开，提供子菜单选项。这种交互方式不仅增加了用户的操作乐趣，还能有效引导用户视线，提高导航效率。 实现这一功能的关键代码包括jQuery的...

    jquery点击向上弹出二级菜单，再点击隐藏

    在实际项目中，可能还需要添加一些额外的优化，比如防止用户在二级菜单展开时点击一级菜单导致二级菜单消失，或者添加过渡效果以提高用户体验。标签“jquery效果”表明这是关于使用jQuery实现特定视觉效果的内容。 ...

    jquery仿京东二级级联菜单导航

    本项目“jquery仿京东二级级联菜单导航”旨在实现一个类似京东商城的下拉二级菜单，利用jQuery库来增强用户体验。这个功能通常用于大型网站，尤其是电商网站，因为它们通常具有多级分类，通过级联菜单可以有效地展示...

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