0

ボタンをクリックして非表示のdivを表示し、ボタンをもう一度クリックした場合、またはユーザーがdivの外側をクリックした場合に、同じdivを非表示にする方法を見つけようとしています。この機能は、Facebookの通知アイコンに表示される機能と非常によく似ています。

    $('.button').click(function() {
        if($(".div").css('visibility') == 'visible') 
            $(".div").css('visibility', 'hidden');
        else
            $(".div").css('visibility', 'visible');
    });

    $(".button").click(function() {
        event.stopPropagation();
    });

    $('html:not(.div)').click(function() {
        //Hide the div if visible
        if($(".div").css('visibility') == 'visible') 
            $(".div").css('visibility', 'hidden');
    });

ただし、これはFirefox / IEでは機能しないようで、Chromeでのみ機能するようです。divはfirefox/IEでまったく表示されません。誰かがこれについて行くためのより良い方法のアイデアを持っていますか？

ありがとう！

4

2 に答える 2

2

更新：ボタンでdivが表示および非表示になり、divの外側をクリックすると非表示になります
デモ：http： //jsfiddle.net/jL2cU/2/

$(document).ready(function(){
  $('.form-container').click(function(event){
    console.log('click - form');
    event.stopPropagation();
  });
  $('html').click(function(event){
    console.log('click - body');
    //hide the form if the body is clicked
    $('.form-container').css('display','none');
  });
  $('button').click(function(event){
    $('.form-container').toggle();
    event.stopPropagation();
  });

});

と 

   <div class="button-container">
        <button>Show div</button>    
      </div>
      <div class="form-container">
          <fieldset id="" class="">
            Here is the TEXT
          </fieldset>
      </div>

と

.button-container
{
  width:300px;
  margin:0 auto;
  text-align: center;
  padding:0px 0px 25px 0px;
}
.form-container
{
  display:none;
  width:300px;
  margin:0 auto;
  text-align: center;
  background: #777;     
}​
于 2012-08-05T10:25:18.360 に答える
1

jQueryトグルメソッドを使用します。

パラメータがない場合、.toggle（）メソッドは要素の表示を切り替えるだけです。

$(function() {
    $('.button').on('click', function() {
        $('.div').toggle();
    }
})();
于 2012-08-05T10:35:18.417 に答える