Переключить цвет фона

Question

Здесь я изменил панель навигации цвет фона при нажатии LINK (DD One или DD Two) с белого на черный, мне нужно, когда unclick LINK (DD Один или ДД Два) навигационная панель должна вернуться на белый фон.

JSFiddle Demo

// Navigation dropdown start

  $(".navbar-header .dropdown .nav-link").click(function(e){
    $(this).closest(".navbar-header").addClass("navbar-selected");
  });

  $(document).click(function(event){
    $(".navbar-header").removeClass("navbar-selected");
  });

  // Navigation dropdown end

Мне нужно сделать это - https://jsfiddle.net/adampavlov/1x56droe/1/

Answer 1

Вы можете прослушать события из bootstrap, чтобы добавить или удалить класс при открытии или закрытии меню, например:

$(".navbar-header").on('show.bs.dropdown', function(e) {
  $(this).addClass("navbar-selected");
});

$(".navbar-header").on('hide.bs.dropdown', function() {
  $(this).removeClass("navbar-selected");
})

Answer 2

Я основывался на ответе Палы sh, чтобы объяснить это. Вы просто добавляете и удаляете класс в зависимости от того, имеет ли он класс navbar-active. Я надеюсь, что это тот вариант использования, который вы ищете. Дайте мне знать

Скрипка

// Navigation dropdown start

  $(".navbar-header .dropdown .nav-link").click(function(e){
  var header = $(this).closest(".navbar-header");
    if (header.classList.has("navbar-selected"))
    {
        header.classList.remove("navbar-selected");
    } else
    {
        header.classList.add("navbar-selected");
    }
  });

Answer 3

Вы можете сделать это, сохранив предыдущую цель и на основе этого добавить / удалить класс navbar-selected, например:

let previousTarget = null;
$(".navbar-header .dropdown .nav-link").click(function(e) {
  if (this !== previousTarget) {
    $(this).closest(".navbar-header").addClass("navbar-selected");
    previousTarget = this;
  } else {
    $(this).closest(".navbar-header.navbar-selected").removeClass("navbar-selected");
    previousTarget = null;
  }  
});

Рабочая демонстрация