Bootstrap实现下拉菜单多级联动

发布时间：2020-12-18 00:33:40 所属栏目：安全来源：网络整理

导读：本文实例为大家分享了Bootstrap实现下拉菜单多级联动的具体代码，供大家参考，具体内容如下 Bootstrap 3 的多级下拉菜单示例 input type="hidden" name="category_id" id="category_id" value="" / div class="dropdown"gt; a id="dLabel" role="button" dat

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

Bootstrap 3 的多级下拉菜单示例

<input type="hidden" name="category_id" id="category_id" value="" /> 
<div class="dropdown"&gt; 
 <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-white" data-target="#" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span id="select-title"&gt;选择分类</span> <span class="caret"&gt;</span></a> 
 <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"&gt; 
  <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-index="1" data-title="一级菜单"&gt;一级菜单</a></li> 
  <li class="dropdown-submenu"&gt; 
   <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-index="2" data-title="一级菜单"&gt;一级菜单</a> 
   <ul class="dropdown-menu"&gt; 
    <li><a data-index="2-1" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-title="二级菜单"&gt;二级菜单</a></li> 
   </ul> 
  </li> 

  <li class="dropdown-submenu"&gt; 
   <a tabindex="3" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-title="一级菜单"&gt;一级菜单</a> 
   <ul class="dropdown-menu"&gt; 
    <li><a tabindex="3-1" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-title="二级菜单"&gt;二级菜单</a></li> 
    <li class="divider"&gt;</li> 
    <li class="dropdown-submenu"&gt; 
     <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-index="3-2" data-title="二级菜单"&gt;二级菜单</a> 
     <ul class="dropdown-menu"&gt; 
      <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-index="3-2-1" data-title="三级菜单"&gt;三级菜单</a></li> 
     </ul> 
    </li> 
   </ul> 
  </li> 
 </ul> 
</div>

$('.dropdown li a').click(function(){

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!