javascript - jsでコンテンツを再度非表示にします

Question

div.info をクリックすると、再び hidden/display:none にする必要があります。これどうやってするの？

html

<div class="floated">
<a href="#" class="showinfo">link 1</a>
<div class="info">onclick this div hide it again</div>
</div>

js

$(document).ready(function() {
    $("a.showinfo").click(function() {
        $("div.info").fadeOut();
        $(this).next("div.info").fadeIn();
    });
});

CSS

div.info {
    display: none;
}
div.floated {
    float: left; position:relative; height:100px; width:100px; background:#f00;
}
div.info{
    position:absolute; background:#ccc; width:100px; height:100px; top:0;
}

フィドル: http://jsfiddle.net/KZ3Ky/6/

Answer 1

まず、2 番目にonClick関数を設定する必要があります。次に、もう一度 => DEMOdivを実行できます。fadeOutdiv

$(document).ready(function() {
 $("a.showinfo").click(function() {
    $("div.info").fadeOut();
    $(this).next("div.info").fadeIn();
     $("div.info").click(function(){
       $("div.info").css("display","none");
     });
  });
});