创建一个可点击的链接答案

【问题标题】：Make a clickable link创建一个可点击的链接
【发布时间】：2014-02-05 14:33:49
【问题描述】：

<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。如何使链接起作用？

【问题讨论】：

你需要添加一些相关的代码。什么是 HTML？也许将它添加到小提琴？
很高兴看到你在谈论什么链接。
另外，为什么要让列表元素可点击...？
您似乎需要通过 JavaScript 捕获单击“a”HTML 元素的事件并停止传播此“click”事件，以使“li”元素无法接收它。

标签： javascript jquery html css hover

【解决方案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);
       } 

    });
});

【讨论】：