添加ARIA屬性，以手風琴

Question

因缺乏腦力的痛苦，似乎無法找出了以下問題：

$('#accordion .title h4').click(function(){ 
     if($('#accordion .title').attr('aria-selected')==='false') { 
       $('#accordion .title').attr('aria-selected' , 'true'); 
       $('#accordion .title').attr('aria-expanded' , 'true'); 
       $('#accordion .accordion-content').attr('aria-hidden' , 'false'); 
     } 
     else{ 
       $('#accordion .title').attr('aria-selected' , 'false'); 
       $('#accordion .title').attr('aria-expanded' , 'false'); 
       $('#accordion .accordion-content').attr('aria-hidden' , 'true');   
     } 
     $(this).parent().next().slideToggle(400).siblings('.accordion- 
      content').slideUp(400); 
     return false; 
}); 

完全小提琴這裏： https://jsfiddle.net/77zqme17/

我試圖切換這個jQuery手風琴的WAI-ARIA屬性，但是因爲它是一個允許多個打開面板的手風琴，所以如果你點擊兩次相同的選擇（注1），我的點擊事件就會正確觸發，但是如果你點擊兄弟仍然有原始選擇打開（注2）。

注1：點擊團兩次正確地改變ARIA屬性詠歎調選擇=「真」詠歎調膨脹「真」和詠歎調隱藏=「假」

注2：點擊當視野仍然打開時，視野正確地改變視野的屬性，但是即使它仍然打開，使命召喚的類別恢復爲詠歎調選擇=「假」詠歎調擴展「假」和詠歎調隱藏=「真實」。

我試過用它做一些魔術，但唉，沒有好的結果，所以這是我原來的腳本片段。任何建議如何讓這個天哪的事情正常工作？

謝謝！

Answer 1

每一次點擊，你應該做出改變局部的點擊。使用this僅更改所選手風琴的title和content的詠歎調屬性。

$('#accordion .title h4').click(function(){ 
    var title = $(this).closest('.accordion-container').find('.title'), 
     content = $(this).closest('.accordion-container').find('.accordion-content'); 

    if(title.attr('aria-selected')==='false') { 
    title.attr('aria-selected' , 'true'); 
    title.attr('aria-expanded' , 'true'); 
    content.attr('aria-hidden' , 'false'); 
    } 
else{ 
    title.attr('aria-selected' , 'false'); 
    title.attr('aria-expanded' , 'false'); 
    content.attr('aria-hidden' , 'true');   
} 
$(this).parent().next().slideToggle(400).siblings('.accordion-content').slideUp(400); 
return false; 
}); 

$('#accordion .title h4').click(function() { 
 
    var title = $(this).closest('.accordion-container').find('.title'), 
 
    content = $(this).closest('.accordion-container').find('.accordion-content'); 
 

 
    if (title.attr('aria-selected') === 'false') { 
 
    title.attr('aria-selected', 'true'); 
 
    title.attr('aria-expanded', 'true'); 
 
    content.attr('aria-hidden', 'false'); 
 
    } else { 
 
    title.attr('aria-selected', 'false'); 
 
    title.attr('aria-expanded', 'false'); 
 
    content.attr('aria-hidden', 'true'); 
 
    } 
 
    $(this).parent().next().slideToggle(400).siblings('.accordion-content').slideUp(400); 
 
    return false; 
 
});

.accordion-content { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="accordion" role="tablist" aria-live="polite"> 
 

 
    <div class="accordion-container"> 
 
    <div class="title" id="tab0" tabindex="0" aria-controls="panel0" aria-selected="false" aria-expanded="false" role="tab"> 
 
     <h4>Mission</h4> 
 
    </div> 
 
    <div class="accordion-content" id="panel0" aria-labelledby="tab0" aria-hidden="true" role="tabpanel"> 
 

 
     <p>Test Test Test</p> 
 

 
    </div> 
 
    </div> 
 

 
    <div class="accordion-container"> 
 
    <div class="title" id="tab1" tabindex="1" aria-controls="panel1" aria-selected="false" aria-expanded="false" role="tab"> 
 
     <h4>Vision</h4> 
 
    </div> 
 
    <div class="accordion-content" id="panel1" aria-labelledby="tab1" aria-hidden="true" role="tabpanel"> 
 

 
     <p>Test Test</p> 
 

 
    </div> 
 
    </div> 
 

 
    <div class="accordion-container"> 
 
    <div class="title" id="tab2" tabindex="2" aria-controls="panel2" aria-selected="false" aria-expanded="false" role="tab"> 
 
     <h4>Values</h4> 
 
    </div> 
 
    <div class="accordion-content" id="panel2" aria-labelledby="tab2" aria-hidden="true" role="tabpanel"> 
 

 
     <p> 
 
     Test 
 
     </p> 
 

 
    </div> 
 
    </div> 
 

 
</div>

Answer 2

您的#accordion .title選擇器太籠統了，它會選擇所有的標題。在點擊事件中使用this意味着它僅適用於正確的標題。

更新JS：

$('#accordion .title h4').click(function(){ 
    if($(this).closest('.title').attr('aria-selected')==='false') { 
     $(this).closest('.title').attr('aria-selected' , 'true'); 
     $(this).closest('.title').attr('aria-expanded' , 'true'); 
     $(this).closest('.accordion-content').attr('aria-hidden' , 'false'); 
    } 
    else{ 
     $(this).closest('.title').attr('aria-selected' , 'false'); 
     $(this).closest('.title').attr('aria-expanded' , 'false'); 
     $(this).closest('.accordion-content').attr('aria-hidden' , 'true');   
    } 
    $(this).parent().next().slideToggle(400).siblings('.accordion-content').slideUp(400); 
    return false; 
}); 

的jsfiddle：https://jsfiddle.net/77zqme17/2/