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-selected =＆＃34; true＆＃34;咏叹调膨胀＆＃34;真＆＃34;和aria-hidden =＆＃34; false＆＃34;

注2：当Mission仍处于打开状态时单击Vision会更正Vision的属性，但会将Mission的类切换回aria-selected =＆＃34; false＆＃34;咏叹调膨胀＆＃34;假＆＃34;和aria-hidden =＆＃34; true＆＃34;即使它仍然开放。

我尝试过一些神奇的工作，但是没有好结果，所以这是我原来的脚本片段。关于如何使这个天蝎座的东西正常工作的任何建议？

谢谢！

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;
});

＆＃13;

$('#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;
});

＆＃13;

.accordion-content {
  display: none;
}

＆＃13;

<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>

＆＃13;

Answer 2

#accordion .title的选择器过于笼统，它会选择所有标题。在click事件中使用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/

将ARIA属性添加到手风琴

2 个答案: