我有一个菜单,在每个 li
中, 它将有多个 <a>
标签。主要的是元素的名称。单击该按钮时,我希望发生 Dropdown 事件。但在 <li>
内的元素上我希望这些点击功能正常运行。
我的 HTML 看起来像这样:
<li class="tree-item-name"><a href="#">Aunts & Uncles</a>
<span class = "bootstrap-styles">
<ul>
<li>
<a href="/family_trees/3"><img alt="Default" class="img-circle" height="48" src="/assets/default.jpg" width="48" /></a>
<a href="/family_trees/3">Jackie Lynn</a> <a data-confirm="Are you sure?" data-method="delete" href="/family_trees/3" rel="nofollow"><i class="fa fa-thumbs-o-down"></i></a>
</li>
</ul>
</span>
</li>
JS 看起来像这样:
jQuery(document).ready(function(){
jQuery('LI.tree-item-name').click(function(){
if (jQuery(this).hasClass('opened')) {
jQuery(this).find('UL').slideUp();
jQuery(this).removeClass('opened');
} else {
jQuery(this).find('UL').slideDown();
jQuery(this).addClass('opened');
}
return false;
});
});
但是现在,当您点击 img
标签或 Jackie Lynn
....都不起作用 - 因为两者都被 JS 劫持了。
我该如何设置,所以只有 li.tree-item-name
有影响吗?
最佳答案
您需要停止事件传播并仅针对其中包含 ul
的 li
jQuery(function($) {
$('LI.tree-item-name').has('ul').click(function() {
if ($(this).hasClass('opened')) {
$(this).find('UL').slideUp();
$(this).removeClass('opened');
} else {
$(this).find('UL').slideDown();
$(this).addClass('opened');
}
return false;
});
$('LI.tree-item-name li').click(function(e) {
e.stopPropagation();
})
});
.tree-item-name ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li class="tree-item-name">
<a href="#">Aunts & Uncles</a>
<span class="bootstrap-styles">
<ul>
<li>
<a href="/family_trees/3"><img alt="Default" class="img-circle" height="48" src="/assets/default.jpg" width="48" /></a>
<a href="/family_trees/3">Jackie Lynn</a> <a data-confirm="Are you sure?" data-method="delete" href="/family_trees/3" rel="nofollow"><i class="fa fa-thumbs-o-down"></i></a>
</li>
</ul>
</span>
</li>
</ul>
关于javascript - 我如何只劫持 LI 中的一个特定链接而不是所有链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26268492/