js实现收缩菜单效果实例代码
更新时间：2013年10月30日 15:23:08 作者：
这篇文章介绍了js实现收缩菜单效果实例代码，有需要的朋友可以参考一下
废话不多说,直接上代码: 有注释
复制代码 代码如下:
<head>
<title></title>
<style type="text/css">
div
{
border: 1px solid black;
width: 100px;
}
ul .tit, .content
{
list-style-type: none;
}
.menu
{
padding: 0px;
margin: 0px;
}
.tit
{
background-color:#0094ff;
color:White;
padding:2px 10px;
cursor:pointer;
}
</style>
<script src="js/jquery-1.9.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//一开始直接隐藏菜单
$(".content").hide();
//给标题添加点击事件
$(".tit").click(function () {
//当点击的时候,打开菜单,同时其他的菜单隐藏
$(this).next().slideDown().parent().siblings().children(".content").slideUp();
}).first().next().slideDown();//默认之后第一个菜单打开
});
</script>
</head>
<body>
<div>
<ul class="menu">
<li class="tit">菜单1</li>
<li class="content">
<ul>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
</li>
</ul>
<ul class="menu">
<li class="tit">菜单2</li>
<li class="content">
<ul>
<li>22222</li>
<li>22222</li>
<li>22222</li>
<li>22222</li>
</ul>
</li>
</ul>
<ul class="menu">
<li class="tit">菜单3</li>
<li class="content">
<ul>
<li>22222</li>
<li>22222</li>
<li>22222</li>
<li>22222</li>
</ul>
</li>
</ul>
</div>
</body>
相关文章
这篇文章介绍了GUID的几种生成算法，有需要的朋友可以参考一下2013-08-08
Bootstrap Table可拖动，需要用到它的Resizable扩展插件，下面脚本之家小编给大家带来了Bootstrap Table列宽拖动的方法，感兴趣的朋友一起看看吧2018-08-08
对象系统中的继承特性有三种方式:基于类，基于原型，基于元类2010-03-03
在本篇文章里小编给各位整理的是关于原生js实现文件上传、下载、封装等实例方法，需要的朋友们可以参考学习下。2020-01-01
利用CSS、JavaScript及Ajax实现高效的图片预加载
图片预加载想必大家都不陌生吧，实现预加载图片有很多方法，包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案，十分高效2013-10-10
javascript动态添加单元格的脚本代码...2007-11-11
这篇文章主要为大家详细介绍了小程序实现分页查询列表的模板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
什么是函数式编程？根据百度百科的描述，“函数式编程是种编程典范，它将电脑运算视为函数的计算。函数编程语言最重要的基础是 λ 演算（lambda calculus）。而且λ演算的函数可以接受函数当作输入（参数）和输出（返回值）。”2015-10-10
本文将详细介绍一个可拖拽列宽表格实例,需要了解更多的朋友可以参考下2012-11-11
本文主要介绍了JS 异步遍历的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
最新评论