Question

我需要知道如何在单击其中的链接时让div保持打开状态。

请查看上面的示例。 <div>包含a/link。单击<div>时，将切换其类。我想在单击a/link时阻止课程切换。

这是HTML：

<div id="out">
    <div class="content">
        <a>click here to learn more..</a>
    </div>
</div>

<div class="side">
</div>

这是javascript：

$(document).ready(function() {
    $("#out").click(function(event) {
        if (!$(event.target).is('a')){
            $(this).toggleClass("side");
        }
    });
    $(".side").click(function() {
        $(this).toggleClass("out");
    });
});

Answer 1

使用.stopPropagation()：

$(document).ready(function() {
    $("#out").click(function() {
        $(this).toggleClass("side");
    });
    $(".side").click(function() {
        $(this).toggleClass("out");
    });
    $('.content a').click(function(e){e.stopPropagation();})
});

<强> jsFiddle example

Answer 2

使toggleClass更改以所点击的内容为条件。如果您将event对象收集为参数，则可以检查其目标是否为链接，并且仅在目标不是链接时才切换该类。

$(document).ready(function() {
    $("#out").click(function(event) {
        if (!$(event.target).is('a')){
            $(this).toggleClass("side");
        }
    });
    $(".side").click(function() {
        $(this).toggleClass("out");
    });
});

示例：http://jsfiddle.net/4hpgb/2/

单击内部链接时如何让div打开

2 个答案: