微客导航 » 文章资讯 » Bootstrap实现下拉菜单多级联动

Bootstrap实现下拉菜单多级联动

2023-09-20 14:57:07 225

本文实例为大家分享了Bootstrap实现下拉菜单多级联动的具体代码，供大家参考，具体内容如下





Bootstrap3的多级下拉菜单示例




.dropdown-submenu{
position:relative;
}
.dropdown-submenu>.dropdown-menu{
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:06px6px6px;
-moz-border-radius:06px6px;
border-radius:06px6px6px;
}
.dropdown-submenu:hover>.dropdown-menu{
display:block;
}
.dropdown-submenu>a:after{
display:block;
content:"";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px05px5px;
border-left-color:#ccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover>a:after{
border-left-color:#fff;
}
.dropdown-submenu.pull-left{
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu{
left:-100%;
margin-left:10px;
-webkit-border-radius:6px06px6px;
-moz-border-radius:6px06px6px;
border-radius:6px06px6px;
}









选择分类

一级菜单

一级菜单

二级菜单




一级菜单

二级菜单


二级菜单

三级菜单

$('.dropdownlia').click(function(){ console.log(this); title=$(this).attr("data-title"); id=$(this).attr("data-index"); $("#select-title").text(title); $("#category_id").val(id); })

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

BootstrapTable使用教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

Bootstrap实现下拉菜单多级联动

热门推荐

随机推荐