Bootstrap實現(xiàn)下拉菜單多級聯(lián)動

更新時間：2017年11月23日 09:57:06 作者：lg_lin

這篇文章主要為大家詳細介紹了Bootstrap實現(xiàn)下拉菜單多級聯(lián)動，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Bootstrap實現(xiàn)下拉菜單多級聯(lián)動的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE HTML> 
<html lang="zh-CN"> 
<head> 
 <meta charset="UTF-8"> 
 <title>Bootstrap 3 的多級下拉菜單示例</title> 
 <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
 <link rel="stylesheet"  rel="external nofollow" /> 
 <script type="text/javascript" src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 
 <style type="text/css"> 
  .dropdown-submenu { 
   position: relative; 
  } 
  .dropdown-submenu > .dropdown-menu { 
   top: 0; 
   left: 100%; 
   margin-top: -6px; 
   margin-left: -1px; 
   -webkit-border-radius: 0 6px 6px 6px; 
   -moz-border-radius: 0 6px 6px; 
   border-radius: 0 6px 6px 6px; 
  } 
  .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: 5px 0 5px 5px; 
   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: 6px 0 6px 6px; 
   -moz-border-radius: 6px 0 6px 6px; 
   border-radius: 6px 0 6px 6px; 
  } 
 </style> 
</head> 
<body> 
<div class="container"> 
 <div class="row"> 
  <div class="form-group"> 
     
    <input type="hidden" name="category_id" id="category_id" value="" /> 
    <div class="dropdown"> 
     <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">選擇分類</span> <span class="caret"></span></a> 
     <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> 
      <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="一級菜單">一級菜單</a></li> 
      <li class="dropdown-submenu"> 
       <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="一級菜單">一級菜單</a> 
       <ul class="dropdown-menu"> 
        <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="二級菜單">二級菜單</a></li> 
       </ul> 
      </li> 
       
      <li class="dropdown-submenu"> 
       <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="一級菜單">一級菜單</a> 
       <ul class="dropdown-menu"> 
        <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="二級菜單">二級菜單</a></li> 
        <li class="divider"></li> 
        <li class="dropdown-submenu"> 
         <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="二級菜單">二級菜單</a> 
         <ul class="dropdown-menu"> 
          <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="三級菜單">三級菜單</a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
     
   </div> 
 </div> 
</div> 
</body> 
</html> 
 
<script type="text/javascript"> 
 
 
$('.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); 
}) 
 
</script>

如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: