我在 HTML 中有这段代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="script.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul class="cars_menu">
<li>Audi
<ul>
<li class="highlight">A4</li>
<li>A6</li>
<li>A3</li>
<li>A5</li>
</ul>
</li>
<li>Volkswagen
<ul>
<li>Golf IV</li>
<li>Golf VI</li>
<li>Golf V</li>
<li>Jetta</li>
</ul>
</li>
<li>BMW
<ul>
<li>E36</li>
<li>E60</li>
<li>E70</li>
<li>Z4</li>
</ul>
</li>
</ul>
</body>
</html>
CSS 代码:
.highlight {
color: red;
}
还有我的脚本文件:
$( "ul.cars_menu li" ).click(function() {
$( this ).toggleClass( "highlight" );
});
任何人都知道，如何更改 AUDI 的颜色，如果我单击 A4、A6，它应该将 A4 和 AUDI 的颜色设置为红色，例如，如果我单击 GOLF IV，则需要更改 Volkswagen 和 GOLF IV到红色等等。
谁能帮我解决这个问题？感谢，伙计们:)
最佳答案
请将html代码改为
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="script.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul class="cars_menu">
<li>Audi</li>
<li>
<ul class="model">
<li>A4</li>
<li>A6</li>
<li>A3</li>
<li>A5</li>
</ul>
</li>
<li>Volkswagen</li>
<li>
<ul class="model">
<li>Golf IV</li>
<li>Golf VI</li>
<li>Golf V</li>
<li>Jetta</li>
</ul>
</li>
<li>BMW</li>
<li>
<ul class="model">
<li>E36</li>
<li>E60</li>
<li>E70</li>
<li>Z4</li>
</ul>
</li>
</ul>
</body>
</html>
Jquery代码为
$( "ul.model li" ).click(function() {
$( this ).parent().removeClass( "highlight" );
$( this ).toggleClass( "highlight" );
$( this ).parent().parent().prev('li').toggleClass( "highlight" );
});
希望它能奏效!!!
关于javascript - 更改 ul li 父颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27503565/