Question

我有一个我希望扩展/收缩的div，但链接除外。我有以下代码，但有效但缺少异常。确保div中所有元素和区域的最有效方法是什么？可扩展的＆＃34;导致使用jquery扩展/缩进，但元素除外。

$("#expandablediv").click(function () {
                if ($("#withinexpandlediv").is(":hidden")) {
                    $("#withinexpandlediv").fadeIn(50);
                }
                else {
                    $("#withinexpandlediv").fadeOut(50);
                }
            });

HTML代码：

<div id="expandablediv" >
    <div class="ddImage">
        <img src="rightArrow.png" alt="Title">
    </div>
    <div class="ddText">
        Title
    </div>
    <div id="withinexpandlediv" >
        Text contains one or more <a href="mailto:email@links.com"> email links.</a>
    </div>
</div>

Answer 1

如果您的意思是不希望链接触发切换，请使用event.target.nodeName：

        $("#expandablediv").click(function (e) {
            if (e.target.nodeName == "A") { return; }
            //if ($(e.target).is('a')) { return; } // also works

            if ($("#withinexpandlediv").is(":hidden")) {
                $("#withinexpandlediv").fadeIn(50);
            }
            else {
                $("#withinexpandlediv").fadeOut(50);
            }
        });

nodeName：http://jsfiddle.net/m7vpk/

is()：http://jsfiddle.net/FQuzt/

Answer 2

像

这样的东西

if(!$('#expandablediv').children().has('a')){
    // handle expandsion/contraction here
}

点击此链接了解详情：jQuery .has()

Answer 3

你可以试试这个：

$("#expandablediv").click(function () {
            if ($("#withinexpandlediv").is(":hidden")) {
                $("#withinexpandlediv").fadeIn(50);
            }
            else {
                $("#withinexpandlediv").fadeOut(50);
            }
}).find('a').click(function(e){
    e.stopPropagation();
});

单击检查元素类型

3 个答案: