Reputation: 2129
Hi guys I have this menu in jquery right, that works perfect, but I still think I can refractory the jquery instead use class="btn-accordion"
for each li
i would like remove this and just use the main class="accordion-menu"
its that possible or that code is ok?
thank you.
html:
<div class="accordion-menu">
<ul class="" role="tabpanel">
<li class="btn-accordion is-active">
<a class="menu-toggle" data-toggle="tooltip" data-placement="bottom" title="home">
<i class="fa fa-bars fa-2x" aria-hidden="true"></i>
</a>
</li>
<li class="btn-accordion"><a href=""><i class="fa fa-search fa-2x" aria-hidden="true"></i></a></li>
<li class="btn-accordion"><a href=""><i class="fa fa-info-circle fa-2x" aria-hidden="true"></i></a></li>
<li class="btn-accordion"><a class="filter-toggle"><i class="fa fa-filter fa-2x" aria-hidden="true"></i></a></li>
</ul>
</div>
jquery
$('.btn-accordion').on('click', function() {
$(this).closest('li').toggleClass('is-active');
});
scss:
.btn-accordion {
color: red;
background-color: blue;
.fa {
color: white;
}
&.is-active {
color: blue;
background-color: red;
.fa {
color: yellow;
}
}
}
EDIT:
sorry guys I was not so clear I want remove the class: class="btn-accordion"
in each <li>
i just use the main class <div class="accordion-menu">
to do my jquery understand?
Upvotes: 0
Views: 719
Reputation: 21499
You can use this simple code
$(".accordion-menu").on("click", function(e) {
if (e.target.nodeName == "A" || e.target.nodeName == "I")
$(e.target).closest("li").toggleClass("is-active");
else if (e.target.nodeName == "LI")
$(e.target).toggleClass("is-active");
});
.is-active {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion-menu">
<ul>
<li>
<a>
<i>♥</i>
</a>
</li>
<li>
<a>
<i>♥</i>
</a>
</li>
<li>
<a>
<i>♥</i>
</a>
</li>
<li>
<a>
<i>♥</i>
</a>
</li>
</ul>
</div>
Upvotes: 1
Reputation: 2995
Use event delegation:
$('.accordion-menu').on('click', '.btn-accordion', function () {
$(this).addClass('is-active').siblings().removeClass('is-active');
});
Edit: If you want to remove the class btn-accordion
you can do that by replacing all .btn-accordion
by .accordion-menu li
in jQuery and CSS code
Upvotes: 1