JQuery UI 手风琴：在“当前”页面上打开选项卡

Question

在 WordPress 网站中添加了 JQuery 手风琴以显示存档的帖子。当前显示的帖子的列表项由 class="current-article" 标识。每个手风琴“选项卡”是一个月（当前年份）或年份。

我已经编译了成功打开页面加载当前文章选项卡的 JQuery 代码。但是，会发生两个错误：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 专家（您可能已经猜到了）——我只是一步一步地为默认的“活动”选项卡删除了“活动”类和属性，并将它们分配给“当前' 选项卡。

我比较了标记或各种状态（有和没有我的代码），看看我是否遗漏了什么，但我看不出任何差异。

我的问题与应用更改的时间有关吗？还是我的更改“锁定”了再次单击时释放的内容？

干杯。

Answer 1

好的 - 今天学到了更多...与其尝试编辑所有标记，我应该只模拟一个“点击事件”。简单的。

所以我没有用那段臃肿的脚本代码代替：

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

这会查找标记为“当前文章”的文章，然后“点击”它关联的 h3 标题。