Question

当用户点击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');
  });
});

Answer 1

使用切换方法显示和隐藏div。

$(document).ready(function() {
    $('div.moreDiv').click(function() {
        $(".hiddenDiv").toggle() });
});

http://jsfiddle.net/R7VRq/24/

Answer 2

使用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/

Answer 3

在这种情况下，您可以在javascript中看到DIV的ID为DIV1。只需使用javascript就不需要jquery，无论如何这都更容易。

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

使用Javascript：

function ShowDIV(){
if (DIV1.style.display=="none") DIV1.style.display="block";
else DIV1.style.display="none";
}

隐藏或显示div的Html：

<a href="#" onClick="ShowDIV();"><button>Show DIV</button></a>

Answer 4

jsBin demo

使用.toggle()切换“显示”状态。
添加事件监听器并使用.stopPropagation()。这将阻止click事件传递（冒泡）到元素祖先。
添加if语句以检查body点击 - 查看弹出窗口是否可见 - 如果为true则隐藏它：

JQ：

  $('div.moreDiv').click(function(e){ // 'e' = event listener
       e.stopPropagation();    // event - stop propagation to body, parents.
       $(".hiddenDiv").toggle();   // toggle 'display' states             
  });

  $('body').click(function(){     
      if( $(".hiddenDiv").is(':visible') ){    // check if element is visible
          $(".hiddenDiv").hide();              // if true - hide it
      }
  });

http://api.jquery.com/event.stopPropagation/
http://api.jquery.com/visible-selector/

Answer 5

$(function() { 
    $('div.moreDiv').click(function() {
        if ($(this).hasClass('showing_hidden_div')) {
            $(this).removeClass('showing_hidden_div');
            $('.hiddenDiv').hide();
        } else {
            $(this).addClass('showing_hidden_div');
            $(".hiddenDiv").show();
        }
    });
});

应该这样做。

Answer 6

jquery中有一个用于隐藏元素的.hide()方法。使用body点击隐藏你的div。

我如何显示和隐藏div

6 个答案:

jsBin demo