Question

我在这里有这个jQuery代码，我打算制作一个菜单，允许用户切换它的可见性。但是，我不确定如何加载隐藏div的页面。我试图让它开始隐藏，并可以通过单击按钮显示，但相反，它开始可见。

我的jQuery：

$(document).ready(function(){
  $("#nav").click(function(){
    $("#items").toggle();
  });
});

我的HTML：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="nav"><a href="#"><p>Toggle</p></a></div>
<div id="items"><p>Content</p></div>

Answer 1

CSS：

#nav {
   visibility: hidden; /* if you want the element to occupy space but not be seen */
   display: none; /* if you want the element to not take up space */
}

您也可以在线HTML <div style="display:none;"></div>

执行此操作

取消隐藏：

$("#nav").show(); // for display: none;
$("#nav").css('visibility', 'visible'); // for visibility : hidden;

而且，Fiddle

Answer 2

首先使用css使内容显示为none然后你可以使用jquery fadeToggle或slideToggle函数

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>

$(document).ready(function(){
  $("#nav").click(function(){
    $("#items").fadeToggle();
  });
});
</script>
</head>
<body>

<div id="nav"><a href="#"><p>Toggle</p></a></div>
<div id="items" style="display:none"><p >Content</p></div>
</html>

Answer 3

如果你想要一些非JavaScript兼容的东西，我会在元素上使用jshidden样式，并根据添加到正文中的类来设置样式：

<div id="nav" class="jshidden"><a href="#"><p>Toggle</p></a></div>

秘密是页面标题中的一小段JavaScript，如果启用了JavaScript，则会在js上设置body类：

e.g。

<script>document.body.className+=' js';</script>

然后设置样式以隐藏任何jshidden项

的CSS：

body.js jshidden{
    display: none;
}

您的切换代码将覆盖样式，使用内联样式，因此将按原样运行：

$(document).ready(function(){
  $("#nav").click(function(){
    $("#items").toggle();
  });
});

所有这一切的好处是，如果没有启用JS，网站将显示内容（现在不是一个重要的优先事项，但你永远不知道何时需要这个）：）

如何在切换可见性之前隐藏div加载

3 个答案: