Невозможно удалить изменение inline CSS или удалить весь атрибут стиля из моего div после первоначальной установки

Question

Проблема:

У меня есть выпадающее меню, и после нажатия на его заголовок, я меняю цвет заголовка. Что я собираюсь сделать, так это то, что, когда меню закрыто, либо нажав на заголовок, либо на одну из ссылок в раскрывающемся списке, верните текст обратно к цвету, которым он был изначально.

Я могу установить Цвет заголовка, но независимо от того, что я делаю, я не могу установить его обратно в черный цвет.

То, что я пробовал:

В функции щелчка по одной из ссылок в списке, я: - установить css - установить attr to '' - убрал стиль

Ни один из них не имел никакого эффекта. Для проверки я использовал инструменты разработчика chrome, и css никогда не менялся, и его стиль никогда не удалялся.

Я также помещал щелчок внутри функции щелчка заголовка меню и обращался к заголовку, используя $ (это). Это тоже не сработало.

Я также пытался добавить класс к HTML, применяя цвет для заголовка, удаляя класс. Затем в JS я добавил его обратно и попытался удалить. Тем не менее, он никогда не был удален. Я знаю, что я правильно ссылаюсь на заголовок, потому что я добавил код для изменения текста заголовка при нажатии на заголовок меню. Так что это не может быть проблема со ссылками.

Я сузился настолько, насколько мог. В конце концов, я подумал, что это может быть проблемой с моей средой разработки. Поэтому я скопировал функциональность в JSFiddle и получил тот же результат. Это говорит мне, что я что-то упускаю.

Вот мой код:

HTML

<div class="menu-title-container">
  <div class="menu-title">Title</div>
  <div class="menu-container">
    <a class="menu-link" href="#">Link 1</a>
    <a class="menu-link" href="#">Link 2</a>
    <a class="menu-link" href="#">Link 3</a>
  </div>
</div>

<div class="selected-link-container">
  <div class="selected-link">

  </div>
</div>

CSS

.menu-container {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.menu-container a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

JS

$(".menu-title-container").on('click', function() {

  $(this).find(".menu-container").slideToggle();
  $(this).find(".menu-title").css("color", "blue");

});


$(".menu-link").on('click', function() {

  $(this).parent().parent().find(".menu-title").text("I can definitely find you");
  $(this).parent().parent().find(".menu-title").css("color", "red");

  $(this).parent().parent().find("menu-title").attr("style", "");
  $(this).parent().parent().find(".menu-title").removeAttr("style");


});

JSFiddle:

https://jsfiddle.net/3pwdrsyv/1/

Answer 1

Вы ищете это поведение? https://jsfiddle.net/76cnL3gm/

$(".menu-title-container").on('click', function(event) {

  $(".menu-container").slideToggle();
  $(".menu-title").css("color", "blue");
  console.log('title-container');
});


$(".menu-link").on('click', function(event) {
  //event.preventDefault();
  event.stopPropagation();

  $(".menu-title").text("I can definitely find you");
  //$(".menu-title").css("color", "red");

  $(this).text("Clicked");

  //$("menu-title").attr("style", "");
  $(".menu-title").removeAttr("style");
  console.log('menu-link');

});

Answer 2

После прочтения подсказки, оставленной первыми 2 комментаторами, я смог исправить проблему.

Строки, которые устранили проблему:

  event.stopPropagation(); // The name of the function is self-explanatory
  $(this).parent().parent().find(".menu-container").slideToggle(); // Close meny

Полный код с изменениями:

 $(".menu-title-container").on('click', function() {

      $(this).find(".menu-container").slideToggle();
      $(this).find(".menu-title").css("color", "blue");

    });


        $(".menu-link").on('click', function() {

          event.stopPropagation();
          $(this).parent().parent().find(".menu-container").slideToggle();

          $(this).parent().parent().find(".menu-title").text("I can definitely find you");


          $(this).parent().parent().find(".menu-title").removeAttr("style");


        });

JSFiddle: https://jsfiddle.net/uxqh6vya/