2

2 つの div があり、1 つが別の上に重ねられています。外側の div をクリックすると、内側の div が非表示になります。内側の div をクリックしても、内側の Div には何も起こらないはずです。同時に、内側の div のリンクは正常に機能するはずです。jqueryを使用してそれを行う方法は？

<div class="outer">
    <div class="inner"></div>
</div>

.outer {
    background-color: #000;  
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    height: 100%;
    width: 100%;
    opacity: 0.5;
}

.inner {
    background-color: blue;
    width: 240px;
    position: fixed;
    z-index: 9999;
    left: 50%;
    top: 50%;
    margin-left: -300px;
    margin-top: -150px;
}

期待どおりに動作しない jQuery コード:

$('.outer').click(function(e){
    $('.inner').hide();
});

$('.inner').click(function(e){
    return false;
});
4

3 に答える 3

5

これはほとんどの場合、泡立ちを防ぐことによって行われます。をクリックする.innerと までバブルアップする.outerため、これらのクリックを防止する必要があります。

$(".outer")
    .on("click", function () {
        $(this).find(".inner").slideUp();
    })
    .on("click", ".inner", function (event) {
        event.stopPropagation();
    });​

フィドル: http://jsfiddle.net/22Uz7/
フィドル (CSS を使用): http://jsfiddle.net/22Uz7/1/

以下のコメントで、jQuery 1.4.2 を使用していることを示しました。そのため、メソッドにアクセスすることはできません.on。次のコードは 1.4.2 で動作するはずです。

$(".outer").bind("click", function () {
    $(this).find(".inner").slideUp();
});

$(".inner").bind("click", function (event) {
    event.stopPropagation();
});​

フィドル: http://jsfiddle.net/22Uz7/3/

于 2012-12-26T19:46:08.500 に答える
1

を使用しevent.targetて、ターゲット クラス名が一致する場合にのみアクションを指定できouterます。

$('.outer').click(function(ev){
    var target = ev.target;
    if (target.className.match(/\bouter\b/)) {
        $(this).find('.inner').toggle();
    }
});​​​​​​

デモを見る

于 2012-12-26T19:47:20.240 に答える
0

このようなことをしますか？

$('.outer').click(function(){
   $('.inner').css('display', 'none');
});

またはそれの子供のために

$('.outer').click(function(){
   $(this).find('.inner').css('display', 'none');
});
于 2012-12-26T19:44:35.440 に答える