jquery - 如何显示和隐藏 div

当用户点击 MoreDiv HiddenDiv 将显示，当再次点击或点击页面 hiddenDiv div 的任何位置时
必须隐藏更多

这是我的 css

.hiddenDiv {
  margin-left:505px;
  margin-top:25px;
  display:none;
  z-index:9876567890;
  position:absolute;
  width:100px;
  border:1px solid #CCC;
}
.hiddenDiv ul {
  list-style:none;
  list-style-type:none;
  padding:0;
  margin:0;
}
.hiddenDiv ul li {
  padding:2px;
  cursor:pointer;
} .hiddenDiv ul li:hover {
  background-color:#4681C5;
}

这是我的 div

<div class="hiddenDiv">
  <ul>
    <li>Add favorites</li>
    <li>Give a Gift</li>
    <li>Block</li>
  </ul>
</div>

这是我的 jquery 代码

$(document).ready(function() {
  $('div.moreDiv').click(function() {
    $(".hiddenDiv").css('display', 'block');
  });
});

最佳答案

使用 show 方法

当您单击更多链接时将显示以下脚本，并在您单击窗口中的任意位置时将其隐藏。

$(document).ready(function() {
   $(document).click(function() {
    ShowHide();
   });

   $('div.moreDiv').click(function(e) {
      e.stopPropagation();
      ShowHide(true);
   });
});

function ShowHide(isFirstTime)
{
     var disp= $(".hiddenDiv").css("display");
     if((disp=="none")&&(isFirstTime))
     {
         $(".hiddenDiv").show()
     }
     else
     {
          $(".hiddenDiv").hide()
     }
}

工作样本:http://jsfiddle.net/R7VRq/31/

关于jquery - 如何显示和隐藏 div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10676229/