ページの読み込み時にアコーディオンが伸びる

Question

私は何をしているのかわからないので、私はJSで役に立たないが、私はCSSが私に過去のことを知らせない壁を打った。

私は、いくつかのアコーディオンテキストセクションがあるウェブサイト上のページを持っています。私が抱えている問題は、これらのどれもページの読み込み時に展開されないようにしたいということです。私はそれらをすべて非表示にします。現在、トップオプションが展開されたページが開きます。

以下は、私が責任あるスクリプトであると信じていることです。誰も私のために光を放つことができますか？

ありがとうございます。 （jQuery）;

/** 
* Accordion-folding functionality. 
* 
* Markup with the appropriate classes will be automatically hidden, 
* with one section opening at a time when its title is clicked. 
* Use the following markup structure for accordion behavior: 
* 
* <div class="accordion-container"> 
* <div class="accordion-section open"> 
*  <h3 class="accordion-section-title"></h3> 
*  <div class="accordion-section-content"> 
*  </div> 
* </div> 
* <div class="accordion-section"> 
*  <h3 class="accordion-section-title"></h3> 
*  <div class="accordion-section-content"> 
*  </div> 
* </div> 
* <div class="accordion-section"> 
*  <h3 class="accordion-section-title"></h3> 
*  <div class="accordion-section-content"> 
*  </div> 
* </div> 
* </div> 
* 
* Note that any appropriate tags may be used, as long as the above classes are present. 
* 
* @since 3.6.0. 
*/ 

(function($){ 

$(document).ready(function() { 

    // Expand/Collapse accordion sections on click. 
    $('.accordion-container').on('click keydown', '.accordion-section-title', function(e) { 
     if (e.type === 'keydown' && 13 !== e.which) { // "return" key 
      return; 
     } 

     e.preventDefault(); // Keep this AFTER the key filter above 

     accordionSwitch($(this)); 
    }); 

}); 

/** 
* Close the current accordion section and open a new one. 
* 
* @param {Object} el Title element of the accordion section to toggle. 
* @since 3.6.0 
*/ 
function accordionSwitch (el) { 


    var section = el.closest('.accordion-section'), 
     sectionToggleControl = section.find('[aria-expanded]').first(), 
     container = section.closest('.accordion-container'), 
     siblings = container.find('.open'), 
     siblingsToggleControl = siblings.find('[aria-expanded]').first(), 
     content = section.find('.accordion-section-content'); 

    // This section has no content and cannot be expanded. 
    if (section.hasClass('cannot-expand')) { 
     return; 
    } 





    // Add a class to the container to let us know something is happening inside. 
    // This helps in cases such as hiding a scrollbar while animations are executing. 
    container.addClass('opening'); 

    if (section.hasClass('open')) { 
     section.toggleClass('open'); 
     content.toggle(true).slideToggle(150); 
    } else { 
     siblingsToggleControl.attr('aria-expanded', 'false'); 
     siblings.removeClass('open'); 
     siblings.find('.accordion-section-content').show().slideUp(150); 
     content.toggle(false).slideToggle(150); 
     section.toggleClass('open'); 
    } 

    // We have to wait for the animations to finish 
    setTimeout(function(){ 
     container.removeClass('opening'); 
    }, 150); 

    // If there's an element with an aria-expanded attribute, assume it's a toggle control and toggle the aria-expanded value. 
    if (sectionToggleControl) { 
     sectionToggleControl.attr('aria-expanded', String(sectionToggleControl.attr('aria-expanded') === 'false')); 
    } 
} 

}

Answer 1

あなたはファイルの先頭にあるとまったく同じHTMLを持っている場合は、最初のアコーディオンからopenクラスを削除します。

<div class="accordion-container"> 
    <!-- The next accordion-section also had the open class --> 
    <div class="accordion-section"> 
     <h3 class="accordion-section-title"></h3> 
     <div class="accordion-section-content"> 
     </div> 
    </div> 
    <div class="accordion-section"> 
     <h3 class="accordion-section-title"></h3> 
     <div class="accordion-section-content"> 
     </div> 
    </div> 
    <div class="accordion-section"> 
     <h3 class="accordion-section-title"></h3> 
     <div class="accordion-section-content"> 
     </div> 
    </div> 
</div>