I have an if/else statement for our navigation where when a user clicks on the link associated with the dropdown-toggle class a submenu pops up.
We have multiple links on our navigation with the dropdown-toggle class. I only need to target 1 not all of them that's why I'm using .eq(0).
When the submenu appears a new class called open gets injected to the parent <li>.
For some reason I can't get this if/else statement to fully work. I have the first half working but not the second.
For the else portion I'm trying to add what would happen if the open class got injected and the active-nav-tab class gets added.
active-nav-tab is the class used for the state when users are on the current page. active-nav-tab is supposed to disappear when a user clicks on dropdown-toggle of the current page only and when they click outside the window of the submenu. Then when a user clicks on a navigation link with dropdown-toggle, the active-nav-tab again is supposed to appear on the current page. Hopefully that makes sense. I've been at this for like two days.
Code Below:
$('.dropdown-toggle').click(function (e) {
if ($(this).not('open')) {
$('.dropdown-toggle').eq(0).removeClass('active-nav-tab');
alert('test1');
}
else {
$('.dropdown-toggle').eq(0).addClass('active-nav-tab');
alert('test2');
}
});
HTML
<li>
<a class="link dropdown-toggle active-nav-tab" role="button">
<span class="tab-icon icon-header-language"></span>
<span class="tab-text">Region</span>
</a>
</li>
<li class="open">
<a class="link dropdown-toggle" role="button">
<span class="tab-icon icon-header-language"></span>
<span class="tab-text">Region</span>
</a>
</li>
<li>
<a class="link dropdown-toggle" role="button">
<span class="tab-icon icon-header-language"></span>
<span class="tab-text">Region</span>
</a>
</li>
I don't know what I'm exactly missing. Any help is gladly appreciated. Thanks!
The quickest change you can make to your code to get the behavior you want is to replace
if ($(this).not('open')) {
With
if ($('.dropdown-toggle').eq(0).hasClass('active-nav-tab')) {
But without knowing your use case or how many "dropdown-toggle" elements you have it's hard to say if this would be a complete solution or not.
This seems to have solved my issue more or less. I'll see what QA says lol Thank you!
$('.active-nav-tab').click(function (e) {
if ($(this).parents().hasClass("open")) {
$(this).addClass('active-nav-tab');
alert('activated');
}
else {
$(this).removeClass('active-nav-tab');
alert('deactivated');
}
});
this will process clicking on the first element with "dropdown-toggle" class
$('.dropdown-toggle:first').click(function () {
$(this).toggleClass("active-nav-tab");
if ($(this).hasClass("active-nav-tab")) {
alert ("Tab activated");
} else {
alert ("Tab deactivated");
}
}
also jQuery function not(selector) should be used on enumeration of objects to filter it.