如何防止单击多重选择时触发Bootstrap Multiselect下拉菜单下的Elements?

时间:2018-12-08 18:54:04

标签: javascript jquery bootstrap-multiselect

当用户单击“引导程序多选”下拉菜单中的选项时,将触发“引导程序切换(http://www.bootstraptoggle.com/)下方元素”。

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

该插件效果很好...仅当您单击代数(下面的1)或下拉菜单中的任何选项时,下面的Bootstrap Toggles(屏幕快照2)就会被触发您直接点击了它们。

如果没有检查多选是否打开逻辑,如何防止这种情况发生?

Screenshot of Multiselect

添加HTML来解决问题... divs位于单个父div中,我将它们移到了单独的Divs中...相同的结果:单击下拉多选将触发wordPref类上的侦听器。 / p>

      <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>

1 个答案:

答案 0 :(得分:0)

我没有用过,但是那两个在同一个div内吗?其中之一是父母吗?..也分享您的代码...您可以尝试做

e.stopPropagation()
如果下拉div是父div,请

到以下div。