javascript - jquery:防止某些子元素执行调用的事件

Question

首先，我想将你们链接到我制作的 JSFiddle，它复制了我的问题:http://jsfiddle.net/E7sLA/

我想要做的是在单击父列表项元素时显示一个名为 .b 的类。所以 <div class="b"> </div> 里面的文字应该在用户单击父列表项元素中的任何位置时显示。我的脚本的那部分工作正常，不工作的部分(或者更确切地说我试图实现的)是当用户单击列表项中的链接时我不想要 <div class="b"> </div> 中的内容扩大。我希望用户被重定向到链接指向的地方。

我的页面看起来像这样:

<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>

这是我正在运行的 JQuery，试图达到这种效果:

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

Answer 1

试试这个:

如果目标是一个链接，不切换，只返回

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