li内容显示不全
已经设置不是第一个ul的内容隐藏，理所当然第一个ul就显示，但是第一个ul的内容中的span却没有显示
<!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>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
.title-active
{
color:#fff;
background:#0086c8;
}
.title-noActive
{
color:#0086c8;
}
#river
{
position:relative;}
#river>li
{
float:left;
list-style:none;}
.riverInfo
{
position:absolute;
top:50px;
left:0;}
.riverInfo li
{
border-radius:3px;
list-style:none;
border:1px solid #CCC;
padding:10px;}
</style>
</head>
<body>
<ul id="river">
<li class="title-default title-active" style="margin-right:20px">天沙河（含雅瑶河）流域
<ul class="riverInfo">
<li><a href="#">（生活污染源）</a><span>2016-05-18</span></li>
<li><a href="#">（工业污染源）</a><span>2016-05-18</span></li>
<li><a href="#">（农业污染源）</a><span>2016-05-18</span></li>
<li><a href="#">更多...</a></li>
</ul>
</li>
<li class="title-default">杜阮河流域
<ul class="riverInfo">
<li><a href="#">信息公开（生活污染源）</a><span>2016-05-18</span></li>
<li><a href="#">信息公开（工业污染源）</a><span>2016-05-18</span></li>
<li><a href="#">（农业污染源）</a><span>2016-05-18</span></li>
<li><a href="#">更多...</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(function() {
$('.riverInfo:not(:first)').hide();
$('#river>li').click(function(){
$(this).children().show();
$(this).siblings().children().hide();
});
$('.title-default').click(function(){
$(this).removeClass('title-noActive');
$(this).addClass('title-active').siblings().removeClass("title-active").addClass('title-noActive');
});
});
</script>
</body>
</html>
个回答
-
- _考拉抱大树_
- 2016-08-17 16:08:42
是受它祖先元素li的样式title-active影响的，那个样式设置了它的color是白色的所以看不到
-
- 慕粉3738847
- 2016-08-17 17:02:48
1楼正解 受祖先元素的css颜色的影响，你改个其他的颜色就可以显示了。