<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
#menu{width:300px;}
.has_children{background:#555;color:#fff;cursor:pointer;}
.highlight{color:#fff;background:green;}
div{padding:0;margin:10px 0;}
div a{background:#888;display:none;floar:left;width:300px;}
</style>
<script src="jquery-1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("hello world!");
});
$(".has_children").click(function(){
$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();
});
</script>
</head>
<body>
<div id="menu">
<div class="has_children">
<span>第一章</span>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
</div>
<div class="has_children">
<span>第二章</span>
<a>21</a>
<a>22</a>
<a>23</a>
<a>24</a>
<a>25</a>
</div>
</div>
</body>
</html>
$(".has_children").click(function(){ $(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide(); }); 你这个js放在位置根本不会起作用呢! $(document).ready(function(){ 应该放到这个里面! });
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。