Javascript 初始设置后，无法删除更改内联CSS或从我的div中删除整个样式属性

问题：

  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");


        });

我有一个下拉菜单，点击它的标题，我改变了标题的颜色。我打算做的是，当菜单关闭时，通过单击标题或下拉列表中的一个链接，将文本重置回原来的颜色

我可以设置标题的颜色，但无论我做什么，我都不能将其设置回黑色

我所尝试的：

  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");


        });

在列表中某个链接的点击功能中，我： -设置css -将属性设置为“” -删除了样式

这些都没有任何效果。我使用chrome开发者工具进行检查，css从未更改，其样式也从未删除

我还将单击放在菜单标题的on click函数中，并使用$（this）访问标题。那也不管用

我还尝试向HTML添加一个类，为标题应用颜色，删除该类。然后在JS中，我将其添加回去，然后尝试删除它。然而，它从未被移除。我知道我正确地引用了标题，因为我添加了一些代码来更改单击菜单标题时标题的文本。所以这不可能是一个参考问题

我尽可能缩小范围。最后，我认为这可能是我的开发环境的问题。因此，我在JSFIDLE中复制了该功能，并得到了相同的结果。这告诉我我错过了什么

这是我的代码：

  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");


        });

HTML

JS

JSFiddle:

---

在阅读了前两位评论者留下的线索后，我能够解决这个问题

解决问题的行：

  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");


        });

完成带有更改的代码：

  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:

---

在阅读了前两位评论者留下的线索后，我能够解决这个问题

解决问题的行：

  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");


        });

完成带有更改的代码：

  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:

---

你在寻找这种行为吗

---

你在寻找这种行为吗

---

即使单击子元素，也始终会调用第一次单击事件。使用console.log（）记录调用的事件，您会发现。单击“.menu-link”时，您实际上也在单击“.menu-title-container”。沸腾起来。。。首先链接变为红色，然后容器再次变为蓝色。关闭容器中的颜色，你会看到它变成红色。是的，我之前试过这个，但仍然无法理解。我知道发生了什么。添加：event.stopPropagation（）；使事情正常工作，但破坏其他功能。我会试着找出答案。只需在菜单标题容器上写一个条件。如果…>>>请勿更改颜色或任何更改即使单击子元素，也始终会调用first click事件。使用console.log（）记录调用的事件，您会发现。单击“.menu-link”时，您实际上也在单击“.menu-title-container”。沸腾起来。。。首先链接变为红色，然后容器再次变为蓝色。关闭容器中的颜色，你会看到它变成红色。是的，我之前试过这个，但仍然无法理解。我知道发生了什么。添加：event.stopPropagation（）；使事情正常工作，但破坏其他功能。我会试着找出答案。只需在菜单标题容器上写一个条件。如果…>>>不要/不要改变颜色或任何改变