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 回答