0

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

在页面加载时，我应该只看到标题...如何？

<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>
4

3 回答 3

4

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

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

我建议查看 jQuery 的优秀文档以获得更深入的解释。

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

给你不想显示的 div 一个类（比如，hideOnLoad），然后在 CSS 中设置可见性属性或在加载时使用 jquery。

例如

$('.hideOnLoad').hide();
于 2012-06-19T03:28:24.073 回答
1

如果我可以建议稍微不同的标记，事情会变得容易得多（你不再需要.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/

于 2012-06-19T03:33:35.947 回答
1

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

$(document).ready(function(){
 $("h2").parent().next().hide();  
});
$("h2").click(function (){
 $("h2").not(this).parent().next().hide();
 $(this).parent().next().show();
 });
于 2012-06-19T03:51:42.540 回答