如何显示和隐藏div

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');
  });
});

- mtarslan

---

我的 Z-index 每次增加 100，我觉得这已经很极端了！ - Andrew Willis

@Norse。你应该因那个瞥眼而获得一枚徽章！ - gdoron

Answer 1

使用toggle方法来显示和隐藏div。

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

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

- Balaji Kandasamy

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/

- Shyju

---

谢谢Shyju，我用那个。 - mtarslan

我有问题，因为moreDiv是一个类，并且在同一页中有许多.moreDiv div，当我点击一个div时，所有div都会显示和隐藏:), 我该怎么解决？ - mtarslan

@mtarslan，我鼓励您以新问题的形式发布它，并附上相应的标记和脚本。 - Shyju

该系统出现错误：它不符合我们的质量标准。因此我无法打开问题。 - mtarslan

@mtarslan：你发了一个新问题吗？ - Shyju

Answer 3

在这种情况下，DIV的ID是DIV1，正如您在JavaScript中所看到的。只需使用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";
}

HTML 隐藏或显示 div：

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

- Spencer May

Answer 4

jsBin演示

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

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/

- Roko C. Buljan

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();
        }
    });
});

应该可以了。

- Andrew Willis

Answer 6

在jQuery中有一个.hide()方法可以隐藏元素。 使用body的onclick事件来隐藏你的div。

- Bartek Banachewicz