当 div 显示/父级处于活动状态时，将 aria-hidden 切换为 false

Posted 2023-05-08

【中文标题】当 div 显示/父级处于活动状态时，将 aria-hidden 切换为 false

【英文标题】：toggling aria-hidden to false when div is showing / parent is active

【发布时间】：2021-07-24 23:25:45

【问题描述】：

只是在显示/隐藏手风琴风格的 jQuery 脚本上寻求一些帮助。

具有“revealerT”类的 div 以隐藏开始，并且 aria-hidden 值为 True。

我正在“.revealerH-click-function”中尝试（技能有限且成功率为零）在“revealerT”div 显示时将“aria-hidden”值切换为 False（这显示父 div “revealer”添加了“active”类）。

（我在“.revealerH-click-function”中完美工作的网络搜索时发现了一些“aria-expanded”切换代码，但我似乎无法应用“aria-hidden”的等效代码）

我当前的代码如下所示。

你可能可以从我下面注释掉的 jQuery 代码中看到...我不是 javascripter :)

非常感谢您的帮助。

非常感谢，祝您有美好的一天。

JavaScript...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>
<script>
$(document).ready(function() 

    $('.revealerH').click(function(e)
        e.preventDefault();                                     
        $(this).parent().toggleClass('active');            
        $(this).attr('aria-expanded', function (i, attr) 
            return attr == 'true' ? 'false' : 'true'
        );
        $(this).next().slideToggle(200);

        //works on the .revealerT div as a test
        $(this).next().toggleClass('boo');

//how to toggle aria hidden on the .revealerT div??

//      $('.revealerT.boo').attr('aria-hidden','false');

//      $(this).next().attr('aria-hidden', function (i, attr) 
//          return attr == 'true' ? 'false' : 'false'
//      );

//      $('.revealer').hasClass('active'); 
//          $('.revealerT').attr('aria-hidden', function (i, attr) 
//              return attr == 'true' ? 'false' : 'false'
//          );
//      

//      $(next).('.revealerT').attr('aria-hidden', function (i, attr) 
//          return attr == 'true' ? 'false' : 'false'
//      );

//      $(this).('.revealerH').hasClass('active') 
//          $(next).('.revealerT').attr('aria-hidden','false');
//      ;

//      if ($(this).parent().hasClass("active"))
//          $next().('.revealerT').attr('aria-hidden','false');
//      ;

        return false;
    );
    
    $('.revealerShowAll').click(function(e)
        e.preventDefault();
        $('.revealer').addClass('active');
        $('.revealerH').attr('aria-expanded','true');
        $('.revealerT').show(300).attr('aria-hidden','false');
        return false;
    );

    $('.revealerHideAll').click(function(e)
        e.preventDefault();
        $('.revealer').removeClass('active')
        $('.revealerH').attr('aria-expanded','false');
        $('.revealerT').slideUp('fast').attr('aria-hidden','true');
    );

);
</script>

最小的 css...

<style type="text/css">

.revealerBox  width: auto; height: auto; margin: 0 0 20px 0; display: block; position: relative; 
.revealer  margin: 0 0 10px 0; text-align: left; display: block; position: relative; 
.revealerH, .revealerT  width: auto; 
.revealerH a  display: block; 
.revealerT  background: #f5f5f5; overflow: hidden; display: none; 
.revealerT .block  padding: 20px; z-index: 50; 

</style> 

HTML...

<div class="revealerBox" role="complementary">

 <div class="revealer">
  <h2 class="revealerH" id="accordion-header-01" aria-controls="accordion-content-01" aria-expanded="false">
   <a href="javascript:void(0);">Question 1</a>
  </h2>
  <div class="revealerT" id="accordion-content-01" aria-labelledby="accordion-header-01" aria-hidden="true">
   <div class="block">
    <p>Answer 1</p>
   </div>
  </div>
 </div>

 <div class="revealer">
  <h2 class="revealerH" id="accordion-header-02" aria-controls="accordion-content-02" aria-expanded="false">
   <a href="javascript:void(0);">Question 2</a>
  </h2>
  <div class="revealerT" id="accordion-content-02" aria-labelledby="accordion-header-02" aria-hidden="true">
   <div class="block">
    <p>Answer 2</p>
   </div>
  </div>
 </div>

 <div class="revealer">
  <h2 class="revealerH" id="accordion-header-03" aria-controls="accordion-content-03" aria-expanded="false">
   <a href="javascript:void(0);">Question 3</a>
  </h2>
  <div class="revealerT" id="accordion-content-03" aria-labelledby="accordion-header-03" aria-hidden="true">
   <div class="block">
    <p>Answer 3</p>
   </div>
  </div>
 </div>

</div>

【参考方案1】：

您可以使用.hasClass("active") 检查revealer div 是否有活动类，这将为您提供真或假，因此将该值设置为您的aria-hidden。

演示代码：

$('.revealerH').click(function(e) 
  e.preventDefault();
  $(this).parent().toggleClass('active');
  $(this).attr('aria-expanded', function(i, attr) 
    return attr == 'true' ? 'false' : 'true'
  );
  $(this).next().slideToggle(200);
  //set attr of next div
  $(this).next().attr('aria-hidden', $(this).parent().hasClass("active"))

);

.revealerBox 
  width: auto;
  height: auto;
  margin: 0 0 20px 0;
  display: block;
  position: relative;


.revealer 
  margin: 0 0 10px 0;
  text-align: left;
  display: block;
  position: relative;


.revealerH,
.revealerT 
  width: auto;


.revealerH a 
  display: block;


.revealerT 
  background: #f5f5f5;
  overflow: hidden;
  display: none;


.revealerT .block 
  padding: 20px;
  z-index: 50;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="revealerBox" role="complementary">

  <div class="revealer">
    <h2 class="revealerH" id="accordion-header-01" aria-controls="accordion-content-01" aria-expanded="false">
      <a href="javascript:void(0);">Question 1</a>
    </h2>
    <div class="revealerT" id="accordion-content-01" aria-labelledby="accordion-header-01" aria-hidden="true">
      <div class="block">
        <p>Answer 1</p>
      </div>
    </div>
  </div>

  <div class="revealer">
    <h2 class="revealerH" id="accordion-header-02" aria-controls="accordion-content-02" aria-expanded="false">
      <a href="javascript:void(0);">Question 2</a>
    </h2>
    <div class="revealerT" id="accordion-content-02" aria-labelledby="accordion-header-02" aria-hidden="true">
      <div class="block">
        <p>Answer 2</p>
      </div>
    </div>
  </div>

  <div class="revealer">
    <h2 class="revealerH" id="accordion-header-03" aria-controls="accordion-content-03" aria-expanded="false">
      <a href="javascript:void(0);">Question 3</a>
    </h2>
    <div class="revealerT" id="accordion-content-03" aria-labelledby="accordion-header-03" aria-hidden="true">
      <div class="block">
        <p>Answer 3</p>
      </div>
    </div>
  </div>

</div>

【讨论】：

感谢斯瓦蒂的协助，非常感谢。新的代码行将 aria-expanded 和 aria-hidden 切换为相同的值，这不是我所需要的。在父代码部分前面添加一个感叹号，就像$(this).next().attr('aria-hidden', !$(this).parent().hasClass("active")); 这样可以使相反的真/假切换工作。美女，谢谢。

以我有限的 jQuery 技能，新行对我来说可能有点太聪明了:)。我绝对有兴趣看看是否有另一种更直接的方法专门提到revealerT div和true（和/或false）属性？

像这样：$(this).next().attr('aria-hidden',$(this).attr('aria-expanded') == 'true' ? 'false':'true')?

这也很好用，谢谢斯瓦蒂。有趣的是看到另一个实现相同最终结果的实现。两者都工作得很好，我想我会使用第一个，因为它有点短，并且覆盖了类活动的父级 - 在脚本文件中一目了然，这可能更有意义。非常感谢，一切顺利