html 代码
.container{
width:100%;
max-width: 300px;
margin: 20px auto 30px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
background: #fff;
}
.container .link{
cursor: pointer;
color: #292421;
padding: 15px 15px 15px 50px;
font-size:14px;
font-weight: 700;
border-bottom: 1px solid #ccc;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.container li.open .link{
color:#ED9121;
}
.container li:last-child .link{
border-bottom: 0;
}
.desc{
background: #3D59AB;
font-size: 14px;
display: none;
}
.desc li{
border-bottom: 1px solid #ccc;
}
.desc li:last-child{
border-bottom: 0;
}
.desc a{
display: block;
padding:12px;
padding-left: 50px;
color: #808A87;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.desc a:hover{
background: #1E90FF;
color: #fff;
}
</style>
</head>
<body>
<ul class = "container">
<li>
<div class = "link">html</div>
<ul class = "desc">
<li><a href="#">Html</a></li>
<li><a href="#">css</a></li>
</ul>
</li>
<li>
<div class = "link">Javascript</div>
<ul class = "desc">
<li><a href="#">Javascript</a></li>
<li><a href="#">jquery</a></li>
<li><a href="#">Zepto</a></li>
<li><a href="#">Require</a></li>
</ul>
</li>
<li>
<div class = "link">Browser</div>
<ul class = "desc">
<li><a href="#">Firefox</a></li>
<li><a href="#">Chrome</a></li>
<li><a href="#">Safari</a></li>
</ul>
</li>
<li>
<div class = "link">Author</div>
<ul class = "desc">
<li><a href="#">Walk Monkey</a></li>
<li><a href="#">Marlboro</a></li>
</ul>
</li>
</ul>
</body>
<script>
$(document).ready(function(){
$(‘.container li’).click(function(){
$(this).children(".desc").slideToggle();
})
/* $(‘.link:eq(0)’).click(function(){
var index=$(‘.desc:eq(0)’);
index.slideToggle();
})
$(‘.link:eq(1)’).click(function(){
var index=$(‘.desc:eq(1)’);
index.slideToggle();
})
$(‘.link:eq(2)’).click(function(){
var index=$(‘.desc:eq(2)’);
index.slideToggle();
})
$(‘.link:eq(3)’).click(function(){
var index=$(‘.desc:eq(3)’);
index.slideToggle();
}) */
})
</script>
</html>
评论前必须登录!
注册