我正在使用 dropdown button by Zurb Foundation 5字体很棒,想法是在菜单可见时旋转字体,并在隐藏后将其旋转回来。
Zurb foundation 5 没有在元素上使用 class open,所以 hasClass 不起作用,而是使用 Aria 并且由于 hasAria 不存在,我尝试使用一些解决方案,遗憾的是它们无法以一种方式工作,或者更多的。我想做的是添加类 fa-rotate-90
到字体元素 <i>
当 parent .wf-burger
是aria-expanded = true
并在 aria-expanded = false
时将其删除.
这是我相当简单的 HTML 代码:
<h1>
<a aria-expanded="false" aria-controls="drop1" data-dropdown="drop1" href="#" class="wf-burger">
<i aria-hidden="true" class="fa fa-bars fa-rotate-90"></i>
</a>
</h1>
<ul aria-hidden="true" class="f-dropdown" id="drop1" data-dropdown-content>
<li><a title="Link 1" href="#1">Link 1</a></li>
<li><a title="Link 2" href="#2">Link 2</a></li>
<li><a title="Link 3" href="#3">Link 3</a></li>
<li><a title="Link 4" href="#4">Link 4</a></li>
<li><a title="Link 5" href="#5">Link 5</a></li>
</ul>
此代码有效但不会在 aria 为 false 时删除该类:
(function($) {
var attr = $('.wf-burger').attr('aria-expanded');
if (typeof attr !== typeof undefined && attr !== false) {
$('.fa.fa-bars').addClass('fa-rotate-90');
}
if (typeof attr !== typeof undefined && attr !== true) {
$('.fa.fa-bars').removeClass('fa-rotate-90');
}
})(jQuery);
此代码根本不起作用:
(function($) {
if ($('.wf-burger').attr('aria-expanded') === 'true') {
$('.fa.fa-bars').addClass('fa-rotate-90');
}
if ($('.wf-burger').attr('aria-expanded') === 'false') {
$('.fa.fa-bars').removeClass('fa-rotate-90');
}
})(jQuery);
最佳答案
一个更简单的解决方案是在点击时简单地切换类。
$(".wf-burger").click(function(){
$('.wf-burger .fa').toggleClass('fa-rotate-90');
});
CSS 解决方案
我刚刚检查过它在打开下拉菜单时使用了 open 类,它不适用于文档,但它正在处理 CodePen 示例,我在其中使用了基础 5.5.3 版本. http://cdn.foundation5.zurb.com/foundation.js
.wf-burger.open .fa{
transform: rotate(90deg);
}
参见示例:http://codepen.io/shoaibik/pen/xVevrv
更新的答案:
问题是下拉菜单应该是附加到下拉菜单的 anchor 的兄弟,如果您删除 H1 标签,它应该可以工作。
<a aria-expanded="false" aria-controls="drop1" data-dropdown="drop1" href="#" class="wf-burger">
<i aria-hidden="true" class="fa fa-bars fa-rotate-90"></i>
</a>
<ul aria-hidden="true" class="f-dropdown" id="drop1" data-dropdown-content>
<li><a title="Link 1" href="#1">Link 1</a></li>
<li><a title="Link 2" href="#2">Link 2</a></li>
<li><a title="Link 3" href="#3">Link 3</a></li>
<li><a title="Link 4" href="#4">Link 4</a></li>
<li><a title="Link 5" href="#5">Link 5</a></li>
</ul>
关于javascript - 如何在 aria true 或 false 时将 addClass 和 removeClass 添加到子元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37242369/