Jquery 如何使用bootstrap3设置多级下拉菜单
我需要在主菜单旁边放置一个子菜单。在我的代码中,它与主菜单重叠Jquery 如何使用bootstrap3设置多级下拉菜单,jquery,twitter-bootstrap-3,drop-down-menu,Jquery,Twitter Bootstrap 3,Drop Down Menu,我需要在主菜单旁边放置一个子菜单。在我的代码中,它与主菜单重叠 for (var i = 0; i < data.length; i++){ var PRODUCT_NAME=data[i]['PRODUCT_NAME']; $("#cust").append('<li class="dropdown" id="first"><a data-toggle="dropdown" class="dropdown-toggle" id='+PRODUCT_NA
for (var i = 0; i < data.length; i++){
var PRODUCT_NAME=data[i]['PRODUCT_NAME'];
$("#cust").append('<li class="dropdown" id="first"><a data-toggle="dropdown" class="dropdown-toggle" id='+PRODUCT_NAME+' name="master" href="#">'+PRODUCT_NAME+
'<span class="caret"></span></a><ul class="dropdown-menu" id=second'+PRODUCT_NAME+'></ul></li>');
$('#second'+PRODUCT_NAME).append('<li class="list-group-item" id="second"><a id='+data[i]['CUSTOMER_NAME']+' name="master" href="#">'+data[i]['CUSTOMER_NAME']+
'</a><ul class="dropdown-menu" id=third'+i+CUSTOMER_NAME+'></ul></li>');
$('#third'+i+CUSTOMER_NAME).append('<li class="list-group-item"><a data-toggle="dropdown" class="dropdown-toggle" aria-expanded="true" id='+data[i]['MASTER_ID']+' name="master_id"
href="#">Q_MASTERID_'+data[i]['MASTER_ID']+'_CLUSTER</a></li>');
我的代码输出:
我想要的是以下类型的输出:
因为使用
append()
方法在所选元素的末尾插入指定的内容
不要简单地使用引导class
您需要借助class
添加一些引导代码,这些代码已经写在引导CSS文件上,您需要为它添加Javascript文件
$(文档).ready(函数(){
$('.dropdown子菜单a.test')。打开(“单击”,函数(e){
$(this.next('ul').toggle();
e、 停止传播();
e、 预防默认值();
});
});代码>
。下拉子菜单{
位置:相对位置;
}
.下拉子菜单.下拉菜单{
排名:0;
左:100%;
页边顶部:-1px;
}
多级下拉列表
教程
-
-
如果你对我的答案感到满意,投票结果将有助于其他人。你能解释一下你在js文件中做了什么吗。我尝试了你的代码,但没有得到第三级子菜单。当你点击下拉菜单时,它是一个点击功能,它将在类名的帮助下切换ul列表,然后如果你从下拉菜单中按下,它将停止该事件是stoppropogation()
方法,它将调用preventdefault()
方法,即停止元素上的默认操作,我认为..u r缺少其他一些东西,这就是代码无法工作的原因。我编辑了我的代码。您能帮我解决这个问题吗。
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}