Jquery 简易手风琴demo

最新推荐文章于 2020-10-28 10:00:51 发布

翡飞

最新推荐文章于 2020-10-28 10:00:51 发布

阅读量169

点赞数

分类专栏： jquery 文章标签： jquery demo

本文链接：https://blog.csdn.net/qq_40538957/article/details/81633460

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

form 表单

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>手风琴Demo</title>
</head>
<body>
<div >
<ul class="leftli">
<li>First</li>
<ul>
<li>First One</li>
<li>First Two</li>
</ul>

<li>three</li>
<ul>
<li>three One</li>
<li>three Two</li>
</ul>

下面是jquery 实现效果

$(function() {
//设置DIV的高度跟随屏幕变化而变化，类似于自适应
$(".leftli").height(document.body.scrollHeight);
//隐藏leftli下所有ul元素
$(".leftli ul").hide();
//bind()为.leftli li的li生成点击事件
$(".leftli li").bind("click", function() {
/**
.netx("ul")获取同级的下一个ul元素
slideToggle(300)展开/关闭当前被点击的ul元素，300为速度，除了可以是数字还可以"slow"、"normal"、"fast"
siblings("ul")遍历所有的ul元素
**/
$(this).next("ul").slideToggle(300).siblings("ul").slideUp(300);
})
})