jquery - Add and remove class in navigation -
i building navigation list open , close. work hidden list open , close, can not change fa class fa-plus fa-minus when child list opened.
<nav> <ul> <li class="test"><a href="#">menu 1 <i class="fa fa-plus"></i></a> <ul> <li><a href="#11">sub menu 1</a></li> <li><a href="#12">sub menu 2</a></li> <li><a href="#13">sub menu 3</a></li> </ul> </li> <li class="test"><a href="#">menu 2 <i class="fa fa-plus"></i></a> <ul> <li><a href="#21">sub menu 1</a></li> <li><a href="#22">sub menu 2</a></li> </ul> </li> </ul> </nav>
and jquery code:
jquery(document).ready(function () { jquery('.test').on('click', function(){ jquery('nav ul ul').hide(); jquery('nav ul li i').addclass('fa-plus'); jquery(this).children('nav ul ul').slidedown(); jquery(this).children('nav ul li i').removeclass('fa-plus').addclass('fa-minus'); return false; }); });
try this,
jquery(document).ready(function () { jquery('.test').on('click', function(){ // hide ul's jquery('nav ul ul').hide(); // add class plus , removing minus jquery('nav ul li i').addclass('fa-plus').removeclass('fa-minus'); // toggle current li -> ul jquery(this).children('ul').slidedown(); // toggle class current li -> jquery(this).find('a > i').removeclass('fa-plus').addclass('fa-minus'); return false; }); });
Comments
Post a Comment