Question

我正在尝试创建一个带有两个子菜单的Bootstrap下拉菜单。我的问题是，在加载文档后动态创建下拉列表，并且不响应我通常如何使它们工作。我通常会怎么做呢

$(document).ready(function(){
    addItem(); //adds the first instance of the drop down
    $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(e){
        e.stopPropagation();
        e.preventDefault();
        $(this).siblings().removeClass("open");
        $(this).parent().toggleClass("open");
    });
});

但这显然不适用于动态创建的内容。我在网上其他地方看到这适用于动态内容;

//still has first instance of dropdown, just later in the doc
$(document).on('click', 'ul.dropdown-menu [data-toggle=dropdown]', function(e){
    e.stopPropagation();
    e.preventDefault();
    $(this).siblings().removeClass("open");
    $(this).parent().toggleClass("open");
});

但是对于我的生活，我无法弄清楚为什么这不起作用。我所看到的是它是在子菜单中添加开放类，但切换父菜单（不停止传播？）所以，我的问题是，为什么第二个没有按预期执行，怎么能我做到了吗？

列出结构参考：

<div class="dropdown open">
  <button id="select0" class="btn new-btn" data-toggle="dropdown" aria-expanded="true">Select Your Item <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a class="sub" data-toggle="dropdown">Item 1</a>
      <ul class="dropdown-menu sub-menu">
        <li><a data-def-cost="6">Item 1.1</a></li>
        <li><a data-def-cost="8">Item 1.2</a></li>
      </ul>
    </li>
    <li><a class="sub" data-toggle="dropdown">Item 2</a>
      <ul class="dropdown-menu sub-menu">
        <li><a data-def-cost="5">Item 2.1</a></li>
        <li><a data-def-cost="3">Item 2.2</a></li>
      </ul>
    </li>
    <li><a data-plu="xyz" data-def-cost="8.00">Item 3</a></li>
    <li><a data-plu="xyz" data-def-cost="8.00">Item 4</a></li>
    <li><a data-plu="xyz" data-def-cost="10.00">Item 5</a></li>
    <li class="dropdown-header">Other Items</li>
    <li><a data-plu="143">Item 6</a></li>
    <li><a data-plu="xyz">Item 7</a></li>
    <li><a data-plu="xyz">Item 8</a></li>
  </ul>
  <input type="text" class="hidden" name="input1">
  <input type="text" class="hidden" name="otherinput1">
</div>

Answer 1

不确定我的解决方案的效率，但我重新安排了一下订单，并强迫父母保持开放

$(document).on('click', 'ul.dropdown-menu [data-toggle=dropdown]', function(e){
    $(this).siblings().removeClass("open");
    $(this).parent().addClass("open");
    $(this).parent().parent().parent().addClass("open");
    e.stopPropagation();
    e.preventDefault();
});

这解决了我的问题

Answer 2

$(this).siblings()指向ul元素，但.open类应该添加到父li：http://getbootstrap.com/javascript/#dropdowns-usage。

通过数据属性或JavaScript，下拉插件通过切换父列表项上的.open类来切换隐藏内容（下拉菜单）。

以下是一条建议（受以下代码段启发：Multi-Level Dropdowns）：

$(document).ready(function () {
  // this variable keeps track of the last open menus
  // in order to close them when another link is clicked
  // or when the entire dropdown is closed
  var open;
  $("#my-dropdown").on("hide.bs.dropdown", function () {
    if (open) open.removeClass("open");
  });
  $(".dropdown-submenu > a").on("click", function (e) {
    if (open) open.removeClass("open");
    open = $(this).parents(".dropdown-submenu");
    open.addClass("open");
    e.stopPropagation();
    e.preventDefault();
  });
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="dropdown" id="my-dropdown">
  <button type="button" data-toggle="dropdown">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action 1</a></li>
    <li><a href="#">Action 2</a></li>
    <li class="dropdown-submenu">
      <a href="#">Submenu 1</a>
      <ul class="dropdown-menu">
        <li><a href="#">Action 1.1</a></li>
        <li><a href="#">Action 1.2</a></li>
      </ul>
    </li>
    <li class="dropdown-submenu">
      <a href="#">Submenu 2</a>
      <ul class="dropdown-menu">
        <li><a href="#">Action 2.1</a></li>
        <li><a href="#">Action 2.2</a></li>
        <li class="dropdown-submenu">
          <a href="#">Submenu 2.3</a>
          <ul class="dropdown-menu">
            <li><a href="#">Action 2.3.1</a></li>
            <li><a href="#">Action 2.3.2</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 3

使用以下其中一行。

$(this).siblings('.dropdown-menu').removeClass('open');
$(this).next('.dropdown-menu').removeClass('open');

JQuery无法理解事件顺序

3 个答案: