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 
$(function() {
    $('.content').hide();
    $('.content:first').show();

    $('.heading').click(function() {
        $('.content').hide();
        $(this).next('.content').slideToggle(500);
    });
});​
于 2012-12-13T10:36:26.363 に答える
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

コードに 1 行追加できます。

      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 に答える