问JQuery容器操作
EN

Stack Overflow用户

提问于 2012-12-13 10:22:03

回答 5查看 913关注 0票数 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就会打开正文。

所以我想知道当页面加载时，我会如何首先打开第一篇文章，但我也想让系统在不同的文章被点击并打开时关闭打开的文章。

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

javascript

jquery

html

containers

回答 5

Stack Overflow用户

回答已采纳

发布于 2012-12-13 10:26:21

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

...but这取决于你的确切需求是什么。

票数 2

Stack Overflow用户

发布于 2012-12-13 10:41:19

您可以隐藏除第一个内容以外的所有内容：

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

票数 3

Stack Overflow用户

发布于 2012-12-13 10:29:09

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