非常简单的toggleClass不工作

Question

所以我有一些非常简单的代码，但它不工作。

$(function() { 
 
\t $("#tren").click(function() { 
 
\t \t $("#trens").toggleClass("show"); 
 
\t }); 
 
});

.show { 
 
    color: "red"; 
 
}

<ul> 
 
    <li id="tren">Some text</li> 
 
</ul> 
 
<div id="trens"> 
 
    <p>Other text</p> 
 
</div>

'其他文本' 应该接受红，但事实并非如此。我究竟做错了什么？

Answer 1

只需删除您的CSS中的引号。运行下面的代码片段来查看它的工作情况。

$(function() { 
 
\t $("#tren").click(function() { 
 
\t \t $("#trens").toggleClass("show"); 
 
\t }); 
 
});

.show { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li id="tren">Some text</li> 
 
</ul> 
 
<div id="trens"> 
 
    <p>Other text</p> 
 
</div>

Answer 2

所有你需要做的就是取词“红”了括号。

.show {color：red;}