Question

我正在尝试通过单击按钮找到显示隐藏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中根本无法显示。有没有人知道更好的方法来解决这个问题？

谢谢！

Answer 1

更新：按钮现在显示并隐藏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;     
}

Answer 2

使用jQuery切换方法。

没有参数，.toggle（）方法只是切换元素的可见性。

$(function() {
    $('.button').on('click', function() {
        $('.div').toggle();
    }
})();

通过选择它之外的任何地方来隐藏div

2 个答案: