Question

在下面的代码中，我可以在点击标题时获得相关内容。但问题是，在页面加载时我看到所有标题和内容，只有在点击任何标题后，其他内容才会消失。情况应该不是这样。

在页面加载时我应该只看到标题......怎么样？

<span>Click a Header!</span>
<div><h2>Sub Header 1</h2></div><div>Content 1</div>
<div><h2>Sub Header 2</h2></div><div>Content 2</div>
<div><h2>Sub Header 3</h2></div><div>Content 3</div>

<script language="javascript">

      $("h2").click(function () 
      {
          $("h2").not(this).parent().next().hide();
          $(this).parent().next().show();
      }); 
</script>

Answer 1

你的代码很可能会在DOM加载之前运行。典型的方法是将其包装在$(document).ready() .ready事件用于指定在DOM完全加载时要执行的函数。

$(document).ready(function(){
     $("h2").click(function () 
      {
          $("h2").not(this).parent().next().hide();
          $(this).parent().next().show();
      }); 
}

我建议查看jQuery的excellent documentation以获得更深入的解释。

如果您看到预期在加载时隐藏的内容，则需要使用display:none

进行样式设置

给你不希望显示类的div（比如hideOnLoad），并在CSS中设置visibility属性或在加载时使用jquery。

e.g。

$('.hideOnLoad').hide();

Answer 2

如果我可能会建议稍微不同的标记，那么事情会变得容易得多（您不再需要.not(this).parent().next()）：

<span>Click a Header!</span>
<div><h2>Sub Header 1</h2><div class="content">Content 1</div></div>
<div><h2>Sub Header 2</h2><div class="content">Content 2</div></div>
<div><h2>Sub Header 3</h2><div class="content">Content 3</div></div>

javascript，可能就在你的标记下面，或者在document.ready上（推荐）：

$('.content').hide();
$('h2').click(function(){
   $('.content').hide(); 
   $(this).next('.content').show();
});

http://jsfiddle.net/k2g8g/

Answer 3

您必须隐藏页面加载中的内容。请尝试以下操作。它可能对你有用

$(document).ready(function(){
 $("h2").parent().next().hide();  
});
$("h2").click(function (){
 $("h2").not(this).parent().next().hide();
 $(this).parent().next().show();
 });

使用Jquery处理页面OnLoad？

3 个答案: