jQuery: onClick if else statement not working

Question

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!

Answer 1

Couple of problems here...

1. The "open" selector is looking for an element, eg <open> . If you're looking for the open class, use .hasClass()
2. The .not() filter always returns a truthy result so it's not much use in an if
3. Your "open" class is on the parent <li> , not the .dropdown-toggle element handling the click event so you need to navigate up

You can also use the .toggleClass() to avoid much of the "if add, else remove" boilerplate

 var firstToggle = $(".dropdown-toggle").on("click", function(e) { firstToggle.toggleClass("active-nav-tab", $(this).parent("li").hasClass("open")) }).eq(0)

 ul{display:flex;justify-content:space-around;list-style:none}.dropdown-toggle{border:1px solid #000;padding:1rem;cursor:pointer}.active-nav-tab{border-color:red;background-color:#fcc}.open.dropdown-toggle{border-color:#00f}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script><ul> <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></ul>

and of course, you might not need jQuery

const toggles = document.querySelectorAll(".dropdown-toggle")
toggles.forEach(toggle => {
  toggle.addEventListener("click", e => {
    toggles[0].classList.toggle(
      "active-nav-tab", toggle.closest("li").classList.contains("open"))
  })
})

Answer 2

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.

Answer 3

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.

Answer 4

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');
    }
});