0

私のサイトにはいくつかの見出しがあるセクションがあり、それぞれのセクションに関連するコンテンツがあり、見出しをクリックするとドロップダウンします。見出しをクリックするとコンテンツが表示され、開いている他のすべてのコンテンツが消えるように、javascript を追加しようとしました。最初の数回の開閉テストでは機能しますが、しばらくすると開いたままになります。これらのセクションの 1 つだけを開くことができるようにする方法があるかどうか疑問に思っています。

前もって感謝します！

HTMLは次のとおりです。

<div class="heading">Header 1</div>
<div class="headingcontent">Content 1</div>
<div class="heading">Header 2</div>
<div class="headingcontent">Content 2</div>
<div class="heading">Header 3</div>
<div class="headingcontent">Content 3</div>

これがJavaScriptです：

jQuery(document).ready(function () {
jQuery(".headingcontent").hide();
var headingcontent_open = false;

jQuery(".heading").click(function () {

    if (headingcontent_open === false) {
        headingcontent_open = true;
        jQuery(this).next(".headingcontent").slideToggle(500);

    } else {
        headingcontent_open = false;
        $(".headingcontent").hide(500);
        jQuery(this).next(".headingcontent").slideToggle(500);

    }

});
4

1 に答える 1

0

各コンテンツ div に ID を与え、ヘッダー タグに data-* 属性を設定し、「アクティブな」クラスを使用しているときに jQuery コードでそれを参照します。

<div class="heading" data-content="content1">Header 1</div>
<div class="headingcontent" id="content1">Content 1</div>
<div class="heading" data-content="content2">Header 2</div>
<div class="headingcontent" id="content2">Content 2</div>
<div class="heading" data-content="content3">Header 3</div>
<div class="headingcontent" id="content3">Content 3</div>

JavaScript:

jQuery(".heading").click(function () {
     var ContentDivID = $(this).data("content");

     $(".headingcontent").removeClass("active");
     $("#"+ContentDivID).addClass("active").slideDown(500); //Slides down the active div
     $(".headingcontent").not(".active").slideUp(500); //Slides up all the content divs that dont have the "active" class
});

これは、data-* が html5 属性であるため、HTML5 を使用していることを前提としています。使用可能なブラウザーがないブラウザーをターゲットにしている場合は、その状況に合わせてコードを変更する必要があります。

于 2013-06-02T15:10:57.887 に答える