Как сделать кнопку закрытия и открытия по клику правильно на JS/JQ?

Question

[Stacy None]

Есть небольшой код который открывает меню навигации по клику и закрывает меню по клику на другую кнопку.
Как сделать так, чтобы открывалось и закрывалось по нажатию на одну и ту же кнопку?

Сам код:

$(function () {
      'use strict';
      $('[data-toggle="offcanvas"]').on('click', function () {
        $('.offcanvas-collapse').addClass('open');
        $('body').addClass('offcanvas-open');
      })
      $('[data-toggle="offcanvas"]').on('click', function () {
        $('.offcanvas-collapse').removeClass('open');
        $('body').removeClass('offcanvas-open');
      })
    })

Comments

[FeST1VaL]

эм, ну как бы у вас один и тот же селектор, так что у вас по сути "вешается" 2 клика... проверяйте наличие класса и в зависимости от результата выполняйте действие. т.е примерно так:

А если вы дублируете кнопку и хотите избавиться от нее, то это уже только верстка по сути

$(function() {
	'use strict';
	$('[data-toggle="offcanvas"]').on('click', function() {
		if ($('body').hasClass('offcanvas-open')) {
			$('.offcanvas-collapse').removeClass('open');
			$('body').removeClass('offcanvas-open');
		} else {
			$('.offcanvas-collapse').addClass('open');
			$('body').addClass('offcanvas-open');
		}
	});
})

[Stacy None]

Артем Будин, Спасибо! большое)

[hzzzzl]

https://api.jquery.com/toggleclass/

Answer 1

[dsgnfox]

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