Question

我有一组动态创建的bootstrap-select小部件，我用下拉列表制作。我的问题是，要选择不关闭下拉列表，我必须放置一个＆＃39; event.stopPropagation（）＆＃39;在下拉列表本身。

当我执行此操作时，引导选择在单击时不会打开，但正常选择将起作用。有没有办法让bootstrap选择在bootstrap下拉列表中工作，在下拉单击事件中调用stopPropagation（）？

编辑：

示例JsFiddle测试应用程序 https://jsfiddle.net/ChaseRLewisAlamode/r4k5cy9s/1/

HTML

<div class="btn-group">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
        Manage Statuses <span class="caret"></span>
       </button>
       <ul class="status-dropdown dropdown-menu" role='menu'>
         <li role='presentation'>
           <div class='status-item'>
               <div class='status-text'>My Status</div>
               <select class='selectpicker'>                                        
                  <option value='active' selected>Active</option>
                  <option value='pending'>Pending</option>
                  <option value='sold'>Sold</option>
                  <option value='inactive'>Inactive</option>
               </select>
            </div>
          </li>
       </ul>
 </div>
<div class="btn-group">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
        Always Visible <span class="caret"></span>
       </button>
       <ul class="visible-dropdown dropdown-menu" role='menu' style="display: block;">
         <li role='presentation'>
           <div class='status-item'>
               <div class='status-text'>My Status</div>
               <select class='selectpicker'>                                        
                  <option value='active' selected>Active</option>
                  <option value='pending'>Pending</option>
                  <option value='sold'>Sold</option>
                  <option value='inactive'>Inactive</option>
               </select>
            </div>
          </li>
       </ul>
 </div>

的javascript

$(".status-dropdown").on('click',function(e){
    e.stopPropagation();
});

Answer 1

我建议您阅读非常相似的问题。

Angular js stop propagation from Bootstrap "dropdown-toggle" event

由于您没有发布任何代码，我假设您的问题非常相似。如果我的答案偏离基础，你可以通过发布你感兴趣的现象的代码示例来帮助我改进它。

为了您的利益，我将尝试在此解释：

当你点击选择时，我预测会发生两件事。

首先是它打开Bootstrap下拉菜单。其次，事件传播到父元素，并触发类似＆＃39; showDetails =！showDetails＆＃39;。

显而易见的解决方案是尝试在td级别使用$ event.stopPropagation（）停止事件传播，以便事件不会冒出DOM树并且永远不会触发父ngClick。不幸的是，它不起作用，因为Bootstrap在文档元素上设置click事件监听器以受益于冒泡，因此您无法停止传播。

假设发生了什么，我建议您check this example out：

<强>使用Javascript：

$("#orgchart").jOrgChart({ chartElement: '#chart' });

$("div#chart div.btn-group > a.dropdown-toggle, .dropdown-menu li a").click(function(e) {
    e.stopPropagation();
    $(.'dropdown-menu').toggle();
});

<强> HTML：

<div id="chart">
</div>

<ul id="orgchart" style="display:none;">
    <li>Test
        <div class="btn-group">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
            Actions
            <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" style="text-align:left;">
                <li><a href="#">Edit</a></li>
                <li><a href="#">Delete</a></li>
            </ul>
        </div>
        <ul>
            <li>Test1.1</li>
            <li>Test1.2</li>
        </ul>
    </li>
</ul>

Bootstrap选择不打开单击

1 个答案: