当前位置：首页 → 问答吧 → 刚刚遇到一个toggleClass的小问题

刚刚遇到一个toggleClass的小问题

时间：2009-05-15

来源：互联网

很简单但是不知道为什么

以下代码点击li的时候不能够切换背景字体颜色是可以改变的

但是如果我把css部分的.menu li改为li就可以了

请问是为什么呢感觉很莫名其妙

复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.menu li{ background:#FFF; border:solid 1px #CCC; margin:10px 0; list-style:none; padding:5px 10px; float:left; margin-right:10px; cursor:pointer;}
.hover{ background:#333; color:#FFF; border:solid 1px #333;}
</style>
<script type="text/javascript" src="http://www.enjoyeasy.com.cn/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.menu li').click(function(){
$(this).toggleClass('hover');
})
})
</script>
</head>
<body>
<ul class="menu">
<li>目录一</li>
<li>目录二</li>
<li>目录三</li>
</ul>
</body>
</html>

[ 此帖被baljeans在2009-05-15 15:49重新编辑 ]

作者: baljeans 发布时间: 2009-05-15

复制代码

<style type="text/css">
.menu { background:#FFF;}
.menu li{ border:solid 1px #CCC; margin:10px 0; list-style:none; padding:5px 10px; float:left; margin-right:10px; cursor:pointer;}
.hover{ background:#333; color:#FFF; border:solid 1px #333;}
</style>

这样写就行了

作者: keakon 发布时间: 2009-05-15

恩发现了但是这样就等于是增加了li的一个背景属性不是更改了呢对吗

作者: baljeans 发布时间: 2009-05-15

没看懂啊! 谁能解释下!
不要答案要解释!

作者: lzadai 发布时间: 2009-05-15

引用

引用第2楼baljeans于2009-05-15 13:28发表的 :
恩发现了但是这样就等于是增加了li的一个背景属性不是更改了呢对吗

是的，有些style可能不允许简单覆盖

作者: keakon 发布时间: 2009-05-15