Question

首先，我想把你们链接到JSFiddle我已经复制了我的问题：http://jsfiddle.net/E7sLA/

我想要做的是在单击父列表项元素时有一个名为.b show的类。因此，当用户单击父列表项元素中的任何位置时，应显示<div class="b"> </div>内的文本。我脚本的那部分工作正常，不工作的部分（或者我正在努力实现的部分）是当用户点击列表项内的链接时我不希望{{1 }} 扩大。我希望将用户重定向到链接所在的位置。

我的页面看起来像这样：

<div class="b"> </div>

这就是我正在尝试实现这种效果的JQuery：

<div id="x">
    <ul>
        <li>
            <div class="a">
                <a href="http://cnn.com">some link</a> click here to expand
            </div>
            <div class="b">
                <input type="submit" value="Accept" name="accept"> 
                <input type="submit" value="Counter" name="counter"> 
                <input type="submit" value="Reject" name="reject">
            </div>
        </li>
        <li>
            <div class="a">
                <a href="http://yahoo.com">some link</a> click here to expand
            </div>
            <div class="b">
                <input type="submit" value="Accept" name="accept"> 
                <input type="submit" value="Counter" name="counter"> 
                <input type="submit" value="Reject" name="reject">
            </div>
        </li>
    </ul>
</div>

Answer 1

试试这个：

 $("#x li").click(function(e) {
    $(this).find(".b").slideToggle();    
});
$("#x a").click(function(e) {
        e.stopPropagation();
});

Answer 2

试试这个：

如果目标是链接，请不要切换，只需返回

$("#x li").click(function(e) {
    if(e.target.tagName.toLowerCase() == 'a') return ;
    $(this).find(".b").slideToggle();
});

Answer 3

这是你想要的效果吗？ http://jsfiddle.net/m7HLM/

$("#x li").click(function(e) {
    $(this).find(".b").slideToggle(); 
});

$("#x li .b input").click(function(e){
    alert($(this).parents('li').attr('id') + " : " + $(this).attr('name')); 

    e.stopPropagation();   
});

e.stopPropagation()会阻止点击事件冒泡DOM树，并在点击嵌套在其中的内容时阻止<li>元素关闭。

http://api.jquery.com/event.stopPropagation/

jquery：防止某些子元素执行被调用的事件

3 个答案: