向手风琴添加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属性为aria选择="true"aria扩展"true"和aria隐藏="false"

注意2：当任务仍然打开时单击Vision会正确更改Vision的属性，但会将任务的类切换回aria选择="false"aria扩展"false"和aria隐藏="true"，即使它仍然打开。

我试着用它变魔术，但可惜没有好结果，所以这是我最初的脚本片段。关于如何让这个该死的东西正常工作，有什么建议吗？

谢谢

Answer 1

您的#手风琴选择器。标题太笼统，它会选择您的所有标题。在click事件中使用此，意味着它将仅适用于正确的标题。

更新的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/

Answer 2

每次单击时，您都应该对该单击进行本地更改。使用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>