javascript - 单击链接时将颜色更改为#fff

Question

我有一个 href 链接“打开菜单”，并且该链接的颜色为灰色。

我想使用 jQuery，因为当我单击此“打开菜单”时，我想将颜色更改为 #FFF。

我尝试使用下面的代码执行此操作，但它不起作用，我正在搜索如何执行此操作，但由于我的图标字体元素，我遇到了更多困难。

你看出我哪里做错了吗？

html:

<li class="show_menu"><a href="#sidr" id="hidden-toggle-link" style="position:absolute;top:-500px;">Open  Menu</a>
<p id="menu_toggle" > <span class="change_color" >
   <i class="fa fa-bars"></i></span>
</p>

CSS:

#menu ul .show_menu span >i .change_color{color:#fff;}

jQuery:

$(function() {                       
  $("#menu ul .show_menu span >i").click(function() {  
    $(this).addClass(".change_color");     
  });
});

Answer 1

使用.addClass()时，您不需要为要添加的类名指定点.:

$(function() {                       
    $("#menu ul .show_menu span >i").click(function() {  
        $(this).addClass("change_color");     
    });
});

另外，请勿在 CSS 中的 i 和 .change_color 之间留有空格，因为空格将针对 的 change_color 类的后代i 元素改为:

#menu ul .show_menu span >i.change_color{color:#fff;}