How do I set a function to a certain class

Question

I am trying to display a div "menu-overlay" only when the .offcanvas-collapse hasClass .open. I have a function to toggle the open class to .offcanvas-collapse so I know I can't write a function based around a toggle class

$('[data-toggle="offcanvas"]').on('click', function () {
        $('.offcanvas-collapse').toggleClass('open');
    });

    $('.offcanvas-collapse.open').each(function () {
        $(".menu-overlay").toggleClass("d-none");
    });

Welcome to Stack Overflow. Please provide a Minimal, Reproducible Example: https://stackoverflow.com/help/minimal-reproducible-example It is also advisable to take the Tour: https://stackoverflow.com/tour — Twisty, Jun 23 '20 at 04:18
This might help https://stackoverflow.com/questions/18050761/toggle-visibility-property-of-div — esnezz, Jun 23 '20 at 04:20
@LeeLieser did any of these answers help? If so, please be sure to mark the answer as accepted so others can find the solution if they are having similar issues. — Mech, Aug 28 '20 at 18:56

score 0 · Answer 1 · answered Jun 23 '20 at 04:19

Use the hasClass() functionality.

$('[data-toggle="offcanvas"]').on('click', function () {
  if ($('[data-toggle="offcanvas"]').hasClass('open')) {
     $('.offcanvas-collapse').toggleClass('close');
  } else {
     $('.offcanvas-collapse').toggleClass('open');
  }
});

score 0 · Answer 2 · answered Jun 23 '20 at 08:49

0

$('[data-toggle="offcanvas"]').on('click', function () {
  if($(this).hasClass('open')) {
    $(".menu-overlay").removeClass("d-none");
    $(this).removeClass('open');
  }
  else {
    $(this).addClass('open');
    $(".menu-overlay").addClass("d-none");
  }
});

answered Jun 23 '20 at 08:49

SahanSira

34
6

it looks like you can't target a already toggleClass with the hasClass functionality – Lee Lieser Jul 06 '20 at 02:13

How do I set a function to a certain class

2 Answers2