Simple if statement with jQuery

Question

Somehow the if statement does not work, although the else part does work. In the given example console logs "menu toggled" and "menu toggled, else works", but "menu toggled, if works" is not triggered. What am I missing? Thanks in advance!

var body = document.body;
var menuToggle = document.querySelector('.menuButton');
var menuActive = "menu-active";
var color = "color";
var menu = document.querySelector('.menu');

$(menuToggle).on('click', function(e) {
  e.preventDefault();
  $(menu).toggleClass(menuActive);
  console.log('menu toggled');
  
  if ($(menu).is(menuActive)) {
    console.log('menu toggled, if works');
    $(body).addClass(color);
  } else {
    console.log('menu toggled, else works');
    $(body).removeClass(color);
  }
});

.color {
  background: orange;
}

.menu-active {
  outline: 1px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<button class="menuButton">menu</button>

<nav class="menu" id="menu" aria-label="Main menu">
  <ul class="main-menu">
    <li><a href="#">service</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</nav>

Using jQuery because with vanilla JavaScript cant get menu working on older devices (i.e. iOS 9). For jQueries .is used vanilla JavaScript .classList.contains, which did work...

Nitheesh · Accepted Answer · 2021-08-10 13:46:52Z

To check for a class existance use hasClass rather that using is.

jQuery is method is used to check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.

var body = document.body;
var menuToggle = document.querySelector('.menuButton');
var menuActive = "menu-active";
var color = "color";
var menu = document.querySelector('.menu');


$(menuToggle).on('click', function (e) {
  e.preventDefault();
  $(menu).toggleClass(menuActive);
  console.log('menu toggled');
  // if ($(menu).is(menuActive)) {
  if($(menu).hasClass(menuActive)) {
    console.log('menu toggled, if works');
    $(body).addClass(color);
  } else {
    console.log('menu toggled, else works');
    $(body).removeClass(color);
  }
});

.color {
  background: orange;
}

.menu-active {
  outline: 1px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button class="menuButton">menu</button>
<nav class="menu" id="menu" aria-label="Main menu">
  <ul class="main-menu">
    <li><a href="#">service</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</nav>

Working example for jQuery is method.

var menuToggle = document.querySelector('.menuButton');
var menu = document.querySelector('.menu');

$(menuToggle).on('click', function (e) {
  console.log($(menu).is('nav'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button class="menuButton">menu</button>
<nav class="menu" id="menu" aria-label="Main menu">
  <ul class="main-menu">
    <li><a href="#">service</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</nav>

Thanks! Any idea why even with jQuery menu does not toggles on older devices, i.e. iOS 9?

fdomn-m · Accepted Answer · 2021-08-10 13:47:44Z

2

jQuery's .is function takes a selector, not a class name, eg:

 $(menu).is("." + menuActive)

you could also use .hasClass to check specifically for a class name, eg:

 $(menu).hasClass(menuActive)

Updated snippet that @isherwood helpfully added:

var body = document.body;
var menuToggle = document.querySelector('.menuButton');
var menuActive = "menu-active";
var color = "color";
var menu = document.querySelector('.menu');

$(menuToggle).on('click', function(e) {
  e.preventDefault();
  $(menu).toggleClass(menuActive);
  console.log('menu toggled');
  
  if ($(menu).is("." + menuActive)) {
    console.log('menu toggled, if works');
    $(body).addClass(color);
  } else {
    console.log('menu toggled, else works');
    $(body).removeClass(color);
  }
});

.color {
  background: orange;
}

.menu-active {
  outline: 1px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<button class="menuButton">menu</button>

<nav class="menu" id="menu" aria-label="Main menu">
  <ul class="main-menu">
    <li><a href="#">service</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</nav>

edited Aug 10, 2021 at 13:47

answered Aug 10, 2021 at 13:37

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

1 Comment

01e5Dk Over a year ago

Thanks! Any idea why even with jQuery menu does not toggles on older devices, i.e. iOS 9?

Collectives™ on Stack Overflow

Simple if statement with jQuery

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related