防止单击时关闭下拉菜单

Question

我在另一个下拉菜单中有一个下拉菜单，但是当我单击第二个下拉菜单时，不是展开而是关闭所有内容。我该如何阻止这种情况的发生？

我尝试删除data-toggle="dropdown"，但不正确。

我的代码，

  <div class="dropdown">
    <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Prueba
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <!-- ********** -->
      <div class="dropright">
        <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Sub-Prueba
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <ul class="dropdown-item" id="NodeFilters">
            <li><input type='checkbox'> check1</li>
            <li><input type='checkbox'> check2</li>
          </ul>
        </div>
      </div>
      <!---->
    </div>
  </div>

我不确定该怎么做，有人可以帮我吗？非常感谢！

Answer 1

添加此代码：

$(document).ready(function(){
  $('.dropdown-toggle').on("click", function(e) {
    $(this).next('div').toggle();
    e.stopPropagation();
  });
});

它将覆盖切换，而e.stopPropagation()将阻止上一级关闭。