Javascript 如何劫持LI中的一个特定链接而不是所有链接？

我有一个菜单，在每个

li

，它将有多个

标签。主要的是项目的名称。单击该按钮时，我希望发生一个下拉事件。但是在

中的项目上，我希望这些单击能够正常工作

我的HTML如下所示：

<li class="tree-item-name"><a href="#">Aunts &amp; 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>

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。树项目名称

。

您需要停止事件传播，只针对

li

s，其中包含

ul

jQuery（函数（$）{
$（'LI.tree item name'）。具有（'ul'）。单击（函数（）{
if（$（this）.hasClass（'opened'））{
$（this.find（'UL'）.slideUp（）；
$（this.removeClass（'opened'）；
}否则{
$（this.find（'UL'）.slideDown（）；
$（this.addClass（'opened'）；
}
返回false；
});
$（'LI.tree-item-name LI'）。单击（函数（e）{
e、 停止传播（）；
})
});
.tree项目名称ul{
显示：无；
}








给您的
标记（aunt&Uncles）一个类，并将该类用作jQuery click事件触发器








jQuery（'.rels'）。单击（函数（）{
if（jQuery（this）.parent（）.hasClass（'opened'））{
jQuery（this.parent（）.find（'UL'）.slideUp（）；
jQuery（this.parent（）.removeClass（'opened'）；
}否则{
jQuery（this.parent（）.find（'UL'）.slideDown（）；
jQuery（this.parent（）.addClass（'opened'）；
}
返回false；
});
这是因为您正在使用（此）来处理您单击的链接，然后选择整个无序列表。
您需要将url放在单独的列表项中，以使其按您的方式工作。
回答得好，Arun。我想知道到底怎么做，我选择了一个更简单的解决方案。很高兴看到您使用jQuery Fu+1有些……这太完美了。正是我需要的！谢谢
<li class="tree-item-name"><a class="rels" href="#">Aunts &amp; Uncles</a>
    <span class = "bootstrap-styles">
       <ul>
           <li>
               <a href="/family_trees/3"><img alt="Default" class="img-circle" height="48" src="http://placekitten.com/g/48/48" 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>

jQuery('.rels').click(function(){
    if (jQuery(this).parent().hasClass('opened')) {
        jQuery(this).parent().find('UL').slideUp();
        jQuery(this).parent().removeClass('opened');
    } else {
        jQuery(this).parent().find('UL').slideDown();
        jQuery(this).parent().addClass('opened');
    }
    return false;
});