JQuery基础练习：简单的手风琴效果

最新推荐文章于 2022-11-20 20:53:52 发布

u011277123

最新推荐文章于 2022-11-20 20:53:52 发布

阅读量373

点赞数

web前端与后端 2016-11-25 21:44

使用JQuery实现一个非常简单的手风琴效果，大牛请忽略。做的比较粗糙，希望见谅。代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script type="text/javascript"src="lib/jquery-3.1.1.min.js"></script>

<style type="text/css">

li:hover{cursor: pointer;}

#list{

width: 200px;

margin: 0 auto;

border: 1px solid black;

}

#list ul{

margin: 0;padding: 0;

list-style: none;

}

.nav a{

background: cadetblue;

display: inline-block;

width: 200px;height: 30px;

line-height: 30px;

border-bottom:1px solid white;

}

.nav ul{

display: none;margin: 0;padding: 0;

}

.nav li{height: 30px;line-height: 30px;}

</style>

<script type="text/javascript">

$(function(){

$('.nav > a').bind('click',function(){

if($(this).next().css('display')=='block'){

$(this).next().hide();

$(this).css('background','cadetblue');

return;

}

$(this).css('background','gainsboro');

$(this).next().show();

$(this).parent().siblings().children('a').css('background','cadetblue');

$(this).parent().siblings().children('ul').hide();

});

});

</script>

</head>

<body>

<div id="container">

<div id="list">

<ul>

<li class="nav">

<a>水果</a>

<ul>

<li>苹果</li>

<li>香蕉</li>

<li>橘子</li>

</ul>

</li>

<li class="nav">

<a>蔬菜</a>

<ul>

<li>黄瓜</li>

<li>茄子</li>

<li>白菜</li>

</ul>

</li>

<li class="nav">

<a>肉类</a>

<ul>

<li>猪肉</li>

<li>牛肉</li>

<li>火腿</li>

</ul>

</li>

</ul>

</div>

</div>

</body>

</html>

未点击之前：

JQuery基础练习：简单的手风琴效果

点击之后展开列表：

JQuery基础练习：简单的手风琴效果

再次点击之后收起展开的列表：

JQuery基础练习：简单的手风琴效果

最后来一张效果图：

JQuery基础练习：简单的手风琴效果

以上如有错误，欢迎各位指出。

u011277123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery基础练习：简单的手风琴效果

web前端与后端 2016-11-25 21:44使用JQuery实现一个非常简单的手风琴效果，大牛请忽略。做的比较粗糙，希望见谅。代码如下：li:hover{cursor: pointer;}#list{width: 200px;margin: 0 auto;border: 1px solid black;}#list ul
复制链接

扫一扫