2

jqueryとcssでdivを見せたり消したりしたい。コードが機能しません:

HTML

<html>
    <head>

    </head>
    <body>
        <div class="box" id="b1">
            <a href="#">click to show content</a>

            <div class="content">
                here is content here is content here is content
                <div class="button" id="b2">remove content</div>
            </div
    </body>
</html>

jQuery

$(document).ready(function() {
    $('#b1').click(function() {

        $('.content').css({
            "display": "block"
        });
    });

    $('#b2').click(function() {

        $('.content').css({
            "display": "none"
        });
    });
});

デモ: http://jsfiddle.net/jTgRF/41/

4

4 に答える 4

4

The problem is that you don't stop the event from propagating.

When you click the button it actually hide the element at first, but the event propagate up to the parent element, at which you catch the click and show it again. It goes so fast it looks like nothing is happening, but actually when you click on #b2, the elements get hidden, the event then bubble up to the parent #b1, to which you have attached click-event listener to show the content.

Therefor, you need to use .stopPropagation() on #b2.

$(document).ready(function(){
     $('#b1').click(function(){
           $('.content').show();
    });
    
    $('#b2').on("click", function(e){ 
           $('.content').hide();
            e.stopPropagation();
    });
});

What you need to do is to pass the click event to the call-backfunction (declared e in my example) and then call stopPropagation() on it to make sure that it doesn't bubble up to the parent element.

Here is a working example: http://jsfiddle.net/jTgRF/64/

Note I use .show() and .hide(), which is exactly the same as what you do with .css(), but is more readable in my opinion.

Edit:

As noted by Venu in his answer, the content will show if you click on the black-area as well, not just the "show content"-text. The easiest way to solve that would be to just move the id="b1" attribute from the div with class content and put it on the a-element instead.

See my updated fiddle: http://jsfiddle.net/jTgRF/65/

于 2012-06-24T14:19:01.350 に答える
2

dom で使用できない要素のイベントをアタッチしているため、イベントは要素にアタッチされません。ライブで使う 

$('#b2').live('click', function(){

               $('.content').css({"display":"none"});
        });

現在および将来において、現在のセレクターに一致するすべての要素のイベント ハンドラーをアタッチします。

EDIT
1) Live は推奨されないため、live の代わりに on を使用します。

2) CSS にはもう 1 つの問題があります。ボックスクラスの高さを 150px に設定しました。黒い領域をクリックすると、イベントが発生します。

したがって、b2 要素を b1 の外に移動すると、親要素へのイベントの伝播も解決されます。

于 2012-06-24T14:11:40.403 に答える
1

You need to change the button click handler to

$('#b2').click(function(e){
           e.stopPropagation();
           $('.content').css({"display":"none"});
    });

You need to add event.stopPropagation() Or click event will be propagated to the parent div and .content will be hidden immediately again.

Demo: http://jsfiddle.net/joycse06/jTgRF/56/

You should use jQuery .show() and .hide() to show/hide elements.

于 2012-06-24T14:19:04.457 に答える
1

Venu's anwser works but live() is depracated.

You should use on() instead :

jQuery .on function for future elements, as .live is deprecated

Code

$(document).ready(function(){
    $('#b1').click(function(){
        $('.content').css({"display":"block"});
    });

    $(document).on('click', '#b2', function(){
        $('.content').css({"display":"none"});
    });
});

Hope this helps

于 2012-06-24T14:20:30.800 に答える