如何防止在单击多选时触发 Bootstrap Multiselect 下拉菜单中的 Elements？

Question

当用户单击 Bootstrap Multiselect 下拉列表中的选项时，将触发 Bootstrap Toggle (http://www.bootstraptoggle.com/) 元素。

我不确定这个问题是特定于 Bootstrap Multiselect 和/或 Bootstrap Toggle，还是两者的相互作用 - 它是我的应用程序中唯一与其他元素重叠/隐藏的元素。

这个插件很好用……只是当你点击 Algebra（下面的 1）或下拉菜单中的任何选项时，下面的 Bootstrap Toggles（截图中的 2）就会被触发，就好像你直接点击了它们。

如果没有 check-to-see-if-the-multiselect-is-open 逻辑，如何防止这种情况发生？

添加 HTML 以解决问题...这些 div 位于单个父 div 中，我将它们移动到单独的 div 中...结果相同：单击下拉多选会触发 wordPref 类上的侦听器。

      <div class="row paddingMenu">
    <div class='col-xs-12 alignleft'>
      <b>Select</b> from <i>active</i> Libraries<a data-toggle="tooltip" data-placement="bottom" title="Click EDIT then ACTIVATE LIBRARIES to add and remove Libraries." tabindex="-1" class="pull-right"><span class="glyphicon glyphicon-info-sign pull-right" style="font-size: 15px"></span></a>:
    </div>
    <div class='col-xs-12 aligncenter'>
      <div class='form-group'><select id='ddLibName' multiple='multiple'></select>
        <div id='ddLibrarySelect'></div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4 aligncenter" data-toggle="tooltip" data-placement="bottom" title="Choose whether to insert selected Comments as Word comment bubbles OR inline text.">
      <input type="checkbox" id="insertMode" class="wordPref" data-toggle="toggle" data-size="small"
      data-off="Inline" data-on="Comment"
      data-offstyle="info" data-onstyle="success">
    </div>
    <div class="col-xs-4 aligncenter" data-toggle="tooltip" data-placement="bottom" title="Save document owner/author info with your usage statistics. This setting may be defined by your institution.">
      <input type="checkbox" id="logMode" class="wordPref" data-toggle="toggle" data-size="small"
      data-off="History OFF" data-on="History ON"
      data-offstyle="info" data-onstyle="success">
    </div>
    <div class="col-xs-4 aligncenter">
        <a class="btn btn-primary btn-sm" id="refreshBtn" data-toggle="tooltip" data-placement="bottom" title="Refresh AP to pull down any content changes or purchases." tabindex="-1">Refresh</a>
    </div>
    <div id='upsellMsgDiv' class='apSidebarAlert col-xs-12 hide'>
      <div class="spacer-5"></div>
      <div class="panel panel-warning">
        <div class="panel-body highlight-cell">
          <span class="apAlertMsg"></span>
          <div id='closeAlertBtn' class='col-xs-12 spacer-5  hide'>
            <button class='btn-sm btn-primary closeSidebarAlert pull-right' type='button'>Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>

Answer 1

我没用过，但是这两个在同一个 div 里吗？其中一个是父母吗？..也分享您的代码...您可以尝试做

e.stopPropagation()

如果下拉 div 是父 div，则到下面的 div。