javascript - bootstrap 下拉菜单和 nanoscroller JS

Question

当我使用 Bootstrap 下拉菜单和 nanoscrollerJS 插件时，发生了一些非常烦人的事情。下拉菜单时不会触发 nanoscroller 插件。一旦您使用 Firebug 并再次浏览下拉列表，它就会触发。看起来下拉菜单隐藏在 DOM 中，即使它被触发了。 nanoscroller如何正确触发？

纳米卷轴:https://jamesflorentino.github.io/nanoScrollerJS/

我创建了一个 fiddle 来演示这个问题: https://jsfiddle.net/spw1khad/

代码:

    <div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <div id="about" class="nano">
        <div class="nano-content">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
      <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
      <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
            <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
      <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
      <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
            <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
      <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
      <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
            <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
      <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
      <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </div>
    </div>  
            </ul>

</div>

Answer 1

首先是一点标记注释；你使用 <div>直接在 <ul> 之后标记标签，这是不正确的。我在下面的代码中改进了这部分。另见 Can I use div as a direct child of UL?

现在您的问题是，当您单击导致“崩溃”纳米滚动器的下拉按钮时， Bootstrap 似乎触发了一些 js 函数。使用带超时的点击事件有点麻烦，但它可以为您完成这项工作。

html部分

<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown <span class="caret"></span>

</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <div id="about" class="nano">
        <div class="nano-content">
            <ul>
                <li><a href="#">Action</a>
                </li>
                <li><a href="#">Another action</a>
                </li>
                <li><a href="#">Something else here</a>
                </li>
                <li><a href="#">Separated link</a>
                </li>
                <li><a href="#">Action</a>
                </li>
                <li><a href="#">Another action</a>
                </li>
                <li><a href="#">Something else here</a>
                </li>
                <li><a href="#">Separated link</a>
                </li>
                <li><a href="#">Action</a>
                </li>
                <li><a href="#">Another action</a>
                </li>
                <li><a href="#">Something else here</a>
                </li>
                <li><a href="#">Separated link</a>
                </li>
                <li><a href="#">Action</a>
                </li>
                <li><a href="#">Another action</a>
                </li>
                <li><a href="#">Something else here</a>
                </li>
                <li><a href="#">Separated link</a>
                </li>
                <li><a href="#">Action</a>
                </li>
                <li><a href="#">Another action</a>
                </li>
                <li><a href="#">Something else here</a>
                </li>
                <li><a href="#">Separated link</a>
                </li>
                <li><a href="#">Action</a>
                </li>
                <li><a href="#">Another action</a>
                </li>
                <li><a href="#">Something else here</a>
                </li>
                <li><a href="#">Separated link</a>
                </li>
                <li><a href="#">Action</a>
                </li>
                <li><a href="#">Another action</a>
                </li>
                <li><a href="#">Something else here</a>
                </li>
                <li><a href="#">Separated link</a>
                </li>
                <li><a href="#">Action</a>
                </li>
                <li><a href="#">Another action</a>
                </li>
                <li><a href="#">Something else here</a>
                </li>
                <li><a href="#">Separated link</a>
                </li>
                <li><a href="#">Action</a>
                </li>
                <li><a href="#">Another action</a>
                </li>
                <li><a href="#">Something else here</a>
                </li>
                <li><a href="#">Separated link</a>
                </li>
                <li><a href="#">Action</a>
                </li>
                <li><a href="#">Another action</a>
                </li>
                <li><a href="#">Something else here</a>
                </li>
                <li><a href="#">Separated link</a>
                </li>
                <li><a href="#">Action</a>
                </li>
                <li><a href="#">Another action</a>
                </li>
                <li><a href="#">Something else here</a>
                </li>
                <li><a href="#">Separated link</a>
                </li>
                <li><a href="#">Action</a>
                </li>
                <li><a href="#">Another action</a>
                </li>
                <li><a href="#">Something else here</a>
                </li>
                <li><a href="#">Separated link</a>
                </li>
            </ul>
        </div>
    </div>
</div>

和js部分:

$('#dropdownMenu1').click(function () {
    setTimeout(function () {
        $(".nano").nanoScroller();
    }, 100);
});