将 ARIA 属性添加到 Accordion

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 属性，但由于它是一个允许多个打开面板的手风琴，如果您单击两次相同的选择，我的 click 事件将正确触发（注 1 ），但如果您单击同级并仍然打开原始选择，则不会（注意 2）。

注意 1：点击 Mission 两次正确地将 ARIA 属性更改为 aria-selected="true" aria-expanded"true" 和 aria-hidden="false"

注意 2： 在 Mission 仍处于打开状态时单击 Vision 会正确更改 Vision 的属性，但会将 Mission 的类切换回 aria-selected="false" aria-expanded"false" 和 aria-hidden ="true" 即使它仍然打开。

我尝试了一些魔法，但是没有好的结果，所以这是我的原始脚本 sn-p。关于如何让这该死的东西正常工作有什么建议吗？

谢谢！

Answer 1

每次点击时，您都应该对该点击进行本地更改。使用 this 仅更改所选手风琴的 title 和 content 的 aria 属性。

$('#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/