jquery实现的二级导航代码

最新推荐文章于 2024-08-25 19:34:22 发布

谷中百合0832

最新推荐文章于 2024-08-25 19:34:22 发布

阅读量757

点赞数

分类专栏：代码类文章标签： jquery 函数 javascript 二级导航

本文链接：https://blog.csdn.net/wanglei0832/article/details/52042742

版权

代码类专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文分享了一段JavaScript代码，展示了如何利用jQuery创建适用于三级导航的菜单。当点击菜单项时，对应的子菜单将通过slideToggle效果展开或收起。同时，HTML和CSS代码分别展示了菜单的结构和样式设计，包括各级菜单项的交互效果和样式调整。通过这个实例，读者可以了解如何用jQuery构建响应式的导航菜单。

摘要由CSDN通过智能技术生成

js代码：适用于三级导航
$(“.menu”).on(“click”,”li”,function(e){ e.stopPropagation(); if($ (this).children(“ul”).length==0){
$(this).siblings().find(‘ul’).slideUp(‘fast’);$ ("iframe").attr("src","tpls/"+ $(this).attr(“id”)+”/”+$ (this).attr(“id”)+”.html”);
$("#codeLink").attr("href","tpls/"+$ (this).attr(“id”)+”/”+ $(this).attr(“id”)+”Code.html”); return; }else{$ (this).siblings().find(‘ul’).slideUp(‘fast’);
$(this).children(“ul”).slideToggle(‘fast’);
return;
}
});

html代码：

表格

表格
带控件表格

          </li>
          <li id="tree"  class="list-group-item">
            <span>树形导航</span>
          </li>
          <li id="tab"  class="list-group-item">
            <span>tab页面</span>
          </li>
          <li id="panel"  class="list-group-item">
          <span>面板</span></li>
          <li class="list-group-item">
            <span>按钮</span>
            <ul class="ul-level2">
                <li id="radio"  class="list-group-item li-level2">
                  <span>单选按钮</span>
                </li>
                <li id="checkbox"  class="list-group-item li-level2">
                  <span>复选按钮</span>
                </li>
                <li id="button"  class="list-group-item li-level2">
                  <span>按钮</span>
                 </li>
            </ul>
          </li>
          <li id="validate"  class="list-group-item">
          <span>validate自动验证</span></li>

          <li id="alert"  class="list-group-item">
          <span>弹出窗口</span></li>
          <li class="list-group-item">
            <span>页面布局</span>
            <ul class="ul-level2">
                <li id="popupPage"  class="list-group-item li-level2">
                <span>弹出层页面布局</span></li>
                <li id="editPage"  class="list-group-item li-level2">
                <span>编辑页面布局</span></li>
            </ul>
          </li>

        </ul>

css代码：
.menu li{
cursor:pointer;
}
.li-level2{
padding-left:0px;
}
ul.list-group{
padding:0px;
}
/* li样式 */
.list-group-item{
padding: 0px;
border-left:none;
}
.li-level2{
border:1px solid #ddd;
margin-bottom: -1px;
margin-right: -1px;
}
.list-group-item span{
width:100%;
padding-left:5px;
display:inline-block;
height:35px;
line-height: 35px;
}
.list-group-item span:hover{
background-color: #DCDCDC;
}
.list-group-item span{
font-size: 13px;
}
.li-level2 span{
height:30px;
line-height: 30px;
padding-left: 15px;
font-size:10px;
}
.demoTitle{
height:60px;
background-color: #434343;
/* background-color: #74ACE2; */
color:#fff;
font-size:28px;
padding-left: 20px;
line-height:55px;
}

/* 查看代码连接样式*/
.layout-nav{
float:right;
margin-top:10px;
margin-right: 10px;
background-color: #eee;
margin-left:-30px;
}
/* 第二级列表样式 */
.ul-level2{
display:none;
padding-left: 0px;
margin-bottom: -1px;
}
.li-level2:first-child{
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.li-level2:last-child{
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}