添加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/