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

只是想了解一些关于显示/隐藏手风琴风格jQuery脚本的帮助

类为“revealerT”的div以隐藏形式开始，其aria隐藏值为True

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

（我在网上搜索时发现了一些“aria expanded”切换代码，在“.revealerH click”功能中效果很好，但我似乎无法应用“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>

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

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

$（文档）.ready（函数（）{
$（'.revealerH'）。单击（函数（e）{
e、 预防默认值（）；
$（this.parent（）.toggleClass（'active'）；
$（this.attr（'aria-expanded'，函数（i，attr）{
return attr=='true'？'false'：'true'
});
$（this.next（）.slideToggle（200）；
//将.revealerT div用作测试
$（this.next（）.toggleClass（'boo'）；
//如何在.revealerT div上切换隐藏的aria？？
//$（'.revealerT.boo'）.attr（'aria-hidden'，'false'）；
//$（this）.next（）.attr（'aria-hidden'，函数（i，attr）{
//return attr=='true'？'false'：'false'
//      });
//$（'.revealer'）.hasClass（'active'）{
//$（'.revealerT'）.attr（'aria-hidden'，函数（i，attr）{
//return attr=='true'？'false'：'false'
//          });
//      }
//$（下一步）。（'.revealerT'）.attr（'aria-hidden'，函数（i，attr）{
//return attr=='true'？'false'：'false'
//      });
//$（this）。（'.revealerH'）.hasClass（'active'））{
//$（下一步）。（'.revealerT'）.attr（'aria-hidden'，'false'）；
//      };
//if（$（this.parent（）.hasClass（“活动”））{
//$next（）.（'.revealerT'）.attr（'aria-hidden'，'false'）；
//      };
返回false；
});
$（'.revealerShowAll'）。单击（函数（e）{
e、 预防默认值（）；
$（'.revealer'）.addClass（'active'）；
$（'.revealerH'）.attr（'aria-expanded'，'true'）；
$（'.revealerT'）.show（300.attr（'aria-hidden'，'false'）；
返回false；
});
$（'.revealerhideal'）。单击（函数（e）{
e、 预防默认值（）；
$（'.revealer'）.removeClass（'active'））
$（'.revealerH'）.attr（'aria-expanded'，'false'）；
$（'.revealerT'）.slideUp（'fast'）.attr（'aria-hidden'，'true'）；
});
});

最小css…

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

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

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

.revealerBox{宽度：自动；高度：自动；边距：0 20px 0；显示：块；位置：相对；}
.revealer{margin:0 10px 0；文本对齐：左；显示：块；位置：相对；}
.revealerH、.revealerT{width:auto；}
.revealerH a{display:block；}
.revealerT{background:#f5；溢出：隐藏；显示：无；}
.revealerT.block{padding:20px；z-index:50；}

Html…

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

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

<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

答复2

答复3

您可以使用

.hasClass（“active”）

检查

revealer

div是否具有活动类，这将为您提供true或false，因此将该值设置为

aria hidden

演示代码：

$（'.revealerH'）。单击（函数（e）{
e、 预防默认值（）；
$（this.parent（）.toggleClass（'active'）；
$（this.attr（'aria-expanded'，函数（i，attr）{
return attr=='true'？'false'：'true'
});
$（this.next（）.slideToggle（200）；
//设置下一个div的attr
$（this.next（）.attr（'aria-hidden'，$（this.parent（）.hasClass（“active”））
});
.revealerBox{
宽度：自动；
高度：自动；
利润率：0.20px0；
显示：块；
位置：相对位置；
}
.探宝者{
裕度：0 10px 0；
文本对齐：左对齐；
显示：块；
位置：相对位置；
}
雷瓦莱尔先生，
.预警{
宽度：自动；
}
雷瓦莱尔先生{
显示：块；
}
.预警{
背景:#f5；
溢出：隐藏；
显示：无；
}
.警报，封锁{
填充：20px；
z指数：50；
}

答复1

答复2

答复3

非常感谢您的帮助，非常感谢。这行新代码将aria扩展和aria隐藏切换为相同的值，这不是我所需要的。在父代码部分前面添加感叹号，如so
$（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'）
，这也很有效，谢谢Swati。有趣的是看到另一个实现实现了相同的最终结果。两者都可以很好地工作，我想我会使用第一个，因为它稍微短一点，并且覆盖了类为active的父类-在脚本文件中看一眼可能会更有意义。非常感谢，祝你一切顺利