时间戳

首页 > 解决方案 > 如何使用 bootstrap3 设置多级下拉菜单

jquery - 如何使用 bootstrap3 设置多级下拉菜单

问题描述

我需要在主菜单旁边放置一个子菜单。在我的代码中，它与主菜单重叠。

 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>');

css

 .dropdown-submenu {
      position: relative;
    }

    .dropdown-submenu .dropdown-menu {
      top: 0;
      left: 100%;
      margin-top: -1px;
    }

我的代码输出： 我的输出

我想要的是以下类型的输出：

实际需要

标签： jquerytwitter-bootstrap-3drop-down-menu

解决方案

Because U r using append() The append() method inserts specified content at the end of the selected elements.

Don't Do that simply use Bootstrap class

You need to add some Bootstrap code with the help of class which is already wrote on bootstrap CSS file and u need to add Javascript file for it

$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  
  <div class="container">
  <h2>Multi-Level Dropdowns</h2>
                                        
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">HTML</a></li>
      <li><a tabindex="-1" href="#">CSS</a></li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li class="dropdown-submenu">
            <a class="test" href="#">Another dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">3rd level dropdown</a></li>
              <li><a href="#">3rd level dropdown</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

This is JSFiddle you can edit and preview Here on JSFiddle

You Can Read Documentation about Dropdown Here

推荐阅读