[英]Stop propagating event to the parent in javascript
我需要在bootstrap下拉列表中實現可折疊的功能。 展開可折疊后,下拉菜單將關閉,因為這是下拉菜單的默認行為。
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>
當我停止事件傳播以便始終打開下拉列表時,可折疊停止工作。
如何防止僅針對下拉列表的事件傳播? 還有其他方法可以做到這一點嗎?
據我所知,沒有辦法為特定的事件,目標或函數使用stopPropagation()
。
這是一種解決方法。 停止傳播並自己切換菜單。
$('a[href="#collapseOne"]').on('click', function(e){ $($(this).attr('href')).toggle(); e.stopPropagation(); })
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.