1

首先，我不是 100% 确定如何为这个页面命名，所以如果可以的话，请编辑。

所以我正在学习 jQuery，我想要一个页面上有许多文章的系统，当页面首次加载时，我希望显示第一篇文章，并将所有其他文章缩减为它们的标题文本或设定高度。

现在我有一个可以打开和关闭容器的系统，它看起来像这样：

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery(".content").hide();

        //toggle the component with class msg_body
        jQuery(".heading").click(function() {
            jQuery(this).next(".content").slideToggle(500);
        });
    });
</script>

我的标记是这样的：

<div class="page_content">
    <h1 align="center">Updates</h1>
    <article class="update_article">
        <h2 class="heading">13/12/2012 - Article Heading</h2>
        <div class="content">
            Article Body
        </div>
    </article>

    <article class="update_article">
        <h2 class="heading">13/12/2012 - Article Heading</h2>
        <div class="content">
            Article Body
        </div>
    </article>
</div>

当这个运行时，所有的文章都将减少到它们的标题，一旦它们被点击，jQuery 就会打开正文。

所以我想知道如何在页面加载时首先打开第一篇文章，但我也希望系统在单击并打开另一个文章时关闭打开的文章。

感谢您的帮助，非常欢迎任何有关此主题的教程或阅读信息。

4

5 回答 5

3

您可以隐藏所有内容，但第一个内容如下：

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery(".content").hide();
        jQuery(".content:first").show();

        jQuery(".heading").click(function() {
            jQuery(".content").slideUp();
            jQuery(this).next(".content").slideToggle(500);
        });​
    });
</script>
于 2012-12-13T10:41:19.133 回答
2 
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function() {
    jQuery(".content").slideUp();
    jQuery(this).next(".content").slideToggle(500);
});

jQuery(".heading:first").click();​

演示。

您可以稍微增强它以不滑入/滑出当前显示的文章，例如：

jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function() {
    var $nextContent = jQuery(this).next(".content");
    jQuery(".content").not($nextContent).slideUp();
    jQuery(this).next(".content").slideToggle(500);
});

jQuery(".heading:first").click();​

...但这取决于您的确切要求。

演示。

于 2012-12-13T10:26:20.543 回答
0 
<script type="text/javascript">
    jQuery(document).ready(function() {
      jQuery(".content").hide();
      //toggle the componenet with class msg_body

      jQuery(".heading").click(function()
      {
        jQuery("article.opened div.content").hide().parent().removeClass('opened');
        jQuery(this).parent().addClass('opened');
        jQuery(this).next(".content").slideToggle(500);
      });

      jQuery(".heading:first").click();​
    });
</script>
于 2012-12-13T10:29:08.680 回答
0

您可以在代码中添加一行：

      jQuery(this).next(".content").slideToggle(500);
      jQuery(this).parent().siblings().children(".content").slideUp(500);
    //this will find all other .content open and closes when other link cliked.

和第一个标题的点击事件：

      jQuery(".heading:first").click();​
于 2012-12-13T10:35:07.747 回答
0 
$(function() {
    $('.content').hide();
    $('.content:first').show();

    $('.heading').click(function() {
        $('.content').hide();
        $(this).next('.content').slideToggle(500);
    });
});​
于 2012-12-13T10:36:26.363 回答