创建一个可点击的链接

Question

<script>
$(document).ready(function () {
    var li = $('.someDiv li');
    li.toggle(function () {
        li.children("div").hide();
        $(this).children("div").fadeIn(700);
    }, function () {
        $(this).children("div").fadeOut(300);
    });
});
</script>

<div class="someDiv">
<ul>
<li>Title <div style="display:none;">Description <a href="#">Something</a></div></li>
<li>Title <div style="display:none;">Description <a href="#">Something</a></div></li>
<li>Title <div style="display:none;">Description <a href="#">Something</a></div></li>
</ul>
</div>

div中有链接，但是当div可见时，链接不可点击，因为点击只是切换div。 如何使链接工作？

Answer 1

我不会使用切换，检查事件是否为锚，如果忽略了点击。

$(function () {
    $('.someDiv').on("click","li", function(e){
        var li = $(this);

        if ( $(e.target).is("a") ) return;

        li.toggleClass("open");
        var divs = li.children("div").stop();

        if(li.hasClass("open")) {
            divs.fadeIn(700);
       } else {
            divs.fadeOut(300);
       } 

    });
});