jQuery 容器操作答案

【问题标题】：JQuery container manipulationjQuery 容器操作
【发布时间】：2012-12-13 10:22:03
【问题描述】：

首先，我不能 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

【解决方案1】：

你可以像这样隐藏除第一个之外的所有内容：

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

【讨论】：

此解决方案是否双向有效？那是当您单击下一个项目或上一个项目时。我看到你使用jQuery(this).next(".content") 之后不会总是显示吗？
好的，太好了...只是想确定一下，因为我遇到了 JS 框架的各种行为，有些有 prev 和 next。不错的测试，只需要增强的 CSS 看起来不错;)

【解决方案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();

Demo.

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

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

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

Demo.

【讨论】：

您的演示工作得很好，但是当我将它实现到我的代码中时，它似乎并不能正常工作。我认为它与链接 jQuery(".heading:first").click();
不用担心，我现在已经整理好了。我记得不久前，从 jfiddle 复制代码似乎对 javascripts 来说是个坏主意。也许这与他们在网站上对文本进行编码的方式有关，但我删除了文本并自己逐字输入，效果很好。非常感谢得到帮助。

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

$(function() {
    $('.content').hide();
    $('.content:first').show();

    $('.heading').click(function() {
        $('.content').hide();
        $(this).next('.content').slideToggle(500);
    });
});

【讨论】：