停止在javascript中将事件传播到父级

Question

我需要在bootstrap下拉列表中实现可折叠。展开可折叠后，下拉列表会关闭，因为这是下拉列表的默认行为。

Scenario 1

Html代码如下：

<div class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
   <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
      <li>
         <div class="panel panel-default" id="panel1">
            <div class="panel-heading">
               <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                  Collapsible group of links
                  </a>
               </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
               <div class="panel-body">
                  <ul>
                     <li><a href="#">Group link 1</a></li>
                     <li><a href="#">Group link 2</a></li>
                     <li><a href="#">Group link 3</a></li>
                  </ul>
               </div>
            </div>
         </div>
      </li>
   </ul>
</div>

当我停止事件传播以便始终打开下拉列表时，可折叠停止工作。

Scenario 2

如何仅针对下拉列表阻止事件传播？还有其他方法可以达到这个目的吗？

Answer 1

据我所知，特定事件，目标或功能无法stopPropagation()。

这是一个解决方法。停止传播并自行切换菜单。

＆＃13;

＆＃13;

$('a[href="#collapseOne"]').on('click', function(e){
  $($(this).attr('href')).toggle();
  e.stopPropagation();
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
   <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
      <li>
         <div class="panel panel-default" id="panel1">
            <div class="panel-heading">
               <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                  Collapsible group of links
                  </a>
               </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
               <div class="panel-body">
                  <ul>
                     <li><a href="#">Group link 1</a></li>
                     <li><a href="#">Group link 2</a></li>
                     <li><a href="#">Group link 3</a></li>
                  </ul>
               </div>
            </div>
         </div>
      </li>
   </ul>
</div>

＆＃13;

＆＃13;

＆＃13;