Question

我正在使用字体很棒的dropdown button by Zurb Foundation 5，其目的是在菜单可见时旋转字体，并在隐藏后将其旋转回来。

Zurb foundation 5没有在元素上使用类open，因此hasClass不起作用，而是使用Aria并且因为hasAria不存在我试图使用一些遗憾地不能以某种方式工作的解决方案或者更多。我想要做的是在父fa-rotate-90为<i>时将字词.wf-burger添加到字体元素aria-expanded = true，并在aria-expanded = false时将其删除。< / p>

以下是我非常简单的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);

Answer 1

你可以用它。您只需使用$('.wf-burger').attr('aria-expanded') == 'true'即可。无需使用类型检查===。

同样使用toggleClass()将是一个很好的方法。

＆＃13;

$('.fa.fa-bars').toggleClass(
    'fa-rotate-90', 
    $('.wf-burger').attr('aria-expanded') == 'true'
);

＆＃13;

.fa-rotate-90 {
  border:1px solid red;
  height:20px;
  width:20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a aria-expanded="true" 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>

＆＃13;

Answer 2

更简单的解决方案是在点击时简单地切换班级。

$(".wf-burger").click(function(){
   $('.wf-burger .fa').toggleClass('fa-rotate-90');
});

CSS解决方案

我刚刚检查过它是在打开下拉列表时使用open类，它是不是在docs上运行，但是它正在使用CodePen示例，我使用了基础 5.5.3 版本。 http://cdn.foundation5.zurb.com/foundation.js

.wf-burger.open .fa{
  transform: rotate(90deg);
}

参见示例：http://codepen.io/shoaibik/pen/xVevrv

更新答案：

问题是下拉列表应该是附加到下拉列表的锚点的兄弟，如果你删除它应该工作的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>

当aria为true或false时，如何将addClass和removeClass添加到子元素？

2 个答案: