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

Question

I'm using the dropdown button by Zurb Foundation 5 with font awesome and the idea is to rotate the font when the menu is visible, and rotate it back once its hidden.

Zurb foundation 5 does not use class open on the element so hasClass doesn't work, instead it uses Aria and since hasAria doesn't exist I've tried to use some solutions that sadly don't work in one way or more. What I'm trying to do is add the class fa-rotate-90 to the font element <i> when the parent .wf-burger is aria-expanded = true and remove it when aria-expanded = false .

Here is my rather simple HTML code:

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

This code works but doesn't remove the class once the aria is 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);

This code didn't work at all:

(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

You can use this. You just need to use $('.wf-burger').attr('aria-expanded') == 'true' . No need to use the type check === .

Also using toggleClass() will be a good way for this.

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

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

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

Answer 2

A more simpler solution would be to simply toggle the class on click.

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

CSS solution

I have just checked that it uses the open class when dropdown is opened, it is not working on docs, but it is working on the CodePen example, where I used the foundation 5.5.3 version. http://cdn.foundation5.zurb.com/foundation.js

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

see example: http://codepen.io/shoaibik/pen/xVevrv

Updated Answer:

The issue was that the dropdown should be sibling of the anchor which is attached to the dropdown, if you remove the H1 tag it should work.

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