JQuery UI accordion: открытая вкладка на странице 'current'

Question

Добавлен JQuery accordian на сайт WordPress для отображения заархивированных сообщений. Отображаемое в данный момент сообщение имеет свой список, определенный классом = «текущая статья». Каждая вкладка «Аккордеон» является либо Месяцем (для текущего года), либо Годом.

Я скомпилировал код JQuery, который успешно открывает вкладку текущей статьи на странице Load. Однако возникают две ошибки: 1) Первая вкладка (обычно открытая по умолчанию) не может быть нажата, пока не будет нажата и открыта другая вкладка, и 2) вкладка «принудительно» открыта с моим кодом не будет закрыта пока он не будет нажат снова, после того как другие будут нажаты.

Вот разметка:

<div id="accordion"> 
<h3 tabindex="-1" aria-selected="false" aria-controls="ui-accordion-accordion-panel-0" id="ui-accordion-accordion-header-0" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>June</h3> 
<div aria-hidden="true" aria-expanded="false" role="tabpanel" aria-labelledby="ui-accordion-accordion-header-0" id="ui-accordion-accordion-panel-0" style="display: none;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom"> 
<ul>           
    <li><a href="http://linkaddress.co.uk" rel="bookmark" title="Article One">Article One</a></li> 
     <li><a href="http://linkaddress.co.uk" rel="bookmark" title="Article Two">Article Two</a></li> 
    </ul> 
</div> 
<h3 tabindex="0" aria-selected="true" aria-controls="ui-accordion-accordion-panel-1" id="ui-accordion-accordion-header-1" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active ui-corner-top"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>May</h3> 
<div aria-hidden="false" aria-expanded="true" role="tabpanel" aria-labelledby="ui-accordion-accordion-header-1" id="ui-accordion-accordion-panel-1" style="display: block;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active"> 
<ul>          
    <li class="current current-article"><a href="http://linkaddress.co.uk" rel="bookmark" title="Article Three">Article Three</a></li> 
    </ul> 
</div> 
<h3 tabindex="-1" aria-selected="false" aria-controls="ui-accordion-accordion-panel-2" id="ui-accordion-accordion-header-2" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>February</h3> 
<div aria-hidden="true" aria-expanded="false" role="tabpanel" aria-labelledby="ui-accordion-accordion-header-2" id="ui-accordion-accordion-panel-2" style="display: none;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom"> 
    <ul>         
     <li><a href="http://linkaddress.co.uk" rel="bookmark" title="Article Four">Article Four</a></li> 
     <li><a href="http://linkaddress.co.uk" rel="bookmark" title="Article Five">Article Five</a></li> 
    </ul> 
    </div> 
</div>  

И вот мой код сценария (который просто помещается в голове):

$(document).ready(function() { 
    $('h3.ui-accordion-header-active').attr('tabindex', '-1'); 
    $('h3.ui-accordion-header-active').attr('aria-selected', 'false'); 
    $('div.ui-accordion-content-active').prev().removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all'); 
    $('div.ui-accordion-content-active').css("display","none"); 
    $('div.ui-accordion-content-active').attr('aria-expanded', 'false'); 
    $('div.ui-accordion-content-active').attr('aria-hidden', 'true'); 
    $('div.ui-accordion-content-active').removeClass("ui-accordion-content-active"); 
    $('li.current-article').closest("div").addClass("ui-accordion-content-active"); 
    $('div.ui-accordion-content-active').attr('aria-expanded', 'true'); 
    $('div.ui-accordion-content-active').attr('aria-hidden', 'false'); 
    $('li.current-article').closest("div").css("display","block"); 
    $('div.ui-accordion-content-active').prev().removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top'); 
    $('h3.ui-accordion-header-active').attr('tabindex', '0'); 
    $('h3.ui-accordion-header-active').attr('aria-selected', 'true'); 
}); 

Я не эксперт Java (как вы можете догадаться) - Я просто пошагово удалил «активные» классы и атрибуты для активной «активной» вкладки и поместил их на вкладку «текущий».

Я сравнил разметку или различные состояния с моим кодом и без него, чтобы увидеть, есть ли что-то, что я пропустил, но я не вижу различий.

Является ли моя проблема связана с сроками применения моих изменений? Или блокировки изменений меняют что-то, которое будет выпущено при повторном нажатии?

Cheers.

Answer 1

ОК - узнал немного больше сегодня ... вместо того, чтобы пытаться редактировать всю разметку, я должен просто имитировать событие щелчка. Simples.

Так что вместо того, что раздутый кусок кода сценария, я заменил с этим:

$(document).ready(function() { 
     if ($('#accordion').length) { 
      $('li.current-article').closest("div").prev("h3").click(); 
     } 
    }); 

Это выглядит для статьи с пометкой «текущий-статьи», а затем «щелчки» это связано заголовок h3.