jQuery或者CSS。这个问题看看有几个人知道问题出现在哪里。

我废话少说。先贴出代码。
《xhtml》代码：
<!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>
<title>Jquery学习</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="index.css" />
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="panel">
<h5 class="head">小山羊</h5>
<div class="content">
小山羊和小鸡是朋友，小鸡请小山羊吃虫子，小山羊说：“谢谢你，我不吃虫子”。小山羊和小狗是朋友，小狗请小山羊吃骨头。
小山羊说：“谢谢你，我不吃骨头”。小山羊和小猫是朋友，小猫请小山羊吃鱼，小山羊说：“谢谢你，我不吃鱼”。小山羊和小
牛是朋友，小牛请小山羊吃青草。小山羊说：“谢谢你”。小山羊和小牛一同吃青草。
</div>
</div>
</body>
</html>
《CSS》代码：
* {
margin:0;
padding:0;
}
#panel {
width:300px;
margin:0 auto;
margin-top:50px;
border:1px solid black;
}
#panel .head {
background:#ccc;
cursor:pointer;
}
#panel .content {
display:block;
display:none;
}
.head_back {
background:green;
}

《jquery代码》：
$(function() {
$("#panel .head").toggle(function() {
$("#panel .head").addClass("head_back");
$("#panel .content").show();
},function() {
$("#panel .head").removeClass("head_back")
$("#panel .content").hide();
})
})

效果就是：点击class为head，背景色由#ccc色变为绿色，并且显示class为content隐藏的内容。再点击head，则恢复原先的状态。为了方便大家明白我说的意思，我专门申请了个免费的网站，效果放在这个网址了：http://52web.host-ed.net (注意：本网站是在外国服务器上。所以如果无法连接，则是因为被和谐了。还有哈，找出问题之前，先别急看我的有效的源码哈)。
问题：class为content能显示。找找哪里出现了问题，使其class为head的背景色无法改为绿色？并说出原因。
注：问题我找出来了。就是不知道为什么要这样。

解决方案 »

  1.   

    因为你的#panel .head里面
    已经写了背景颜色颜色 。
    添加head_back这个类 。但是还是取得head的背景色。
      

  2.   

    #panel .content {
    display:block;
    display:none;
    }
    #panel .head_back {
    background:green;
    }因为css优先级别的问题
      

  3.   


    晕还是看不懂。我干脆改成这样了：
                      《CSS代码》：
    * {
    margin:0;
    padding:0;
    }
    #panel {
    width:300px;
    margin:0 auto;
    margin-top:50px;
    border:1px solid black;
    }
    #panel .head {
    background:#ccc;
    cursor:pointer;
    }
    .content {
    display:block;
    display:none;
    }
               《jquery代码》：
    $(function() {
    $("#panel .head").toggle(function() {
    $("#panel .head").css("background","green");
    $("#panel .content").show();
    },function() {
    $("#panel .head").addClass("head")
    $("#panel .content").hide();
    })
    })