每天一个jQuery插件-简易手风琴
简易手风琴
简易手风琴菜单
效果如下
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手风琴菜单</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
user-select: none;
list-style: none;
text-align: center;
}
#menu{
border: 1px solid lightgray;
width: 200px;
margin: 0 auto;
}
.title{
font-weight: bold;
}
</style>
</head>
<body>
<ul id="menu">
<li>
<span class="title">标题1</span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>
<span class="title">标题2</span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>
<span class="title">标题3</span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>
<span class="title">标题4</span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
</ul>
</body>
</html>
<script>
$(document).on("click",".title",function(){
var str = $(this).text();
var ars = $(".title");
for(var i=0;i<ars.length;i++){
var $ar = $(ars[i]);
var temp = $ar.text();
if(temp==str){
$ar.next().slideDown("fast");
}else{
$ar.next().slideUp("fast");
}
}
})
</script>
思路解释
- 终于有一次是用到jquery的了，啊哈
- 大概的意思就是你点击了某个标题，那么标题下面的下一级菜单你自己判断是否收缩
- 然后用slidedown出现，和slidedown出现于slideup隐藏就行了
- 同样的，像是文章标题+内容的布局也可以用同样的方式来实现，过程无二