jquery 写的折叠菜单

<!-- 总栏 -->
<div style="width:180px;height:50px;background-color:#000;">
<button class="btn btn-primary btn-lg" id="btn_packinglist" >
单机折叠菜单
</button>
</div>
<!-- 总栏-->

<!-- 下拉列表拦 -->

<!-- 按钮栏 -->
<div class="item" style="width:180px;height:30px;display:none;background-color:red;">
<div style="width:30px;height:20px;background-color:#fff;"></div>
<div style="width:30px;height:20px;background-color:#fff; margin-left: 40px;margin-top: -20px"></div>
</div>
<!-- 按钮栏 -->
<!-- 子按钮 -->
<div class="sub_item" style="width:180px;height:30px;display:none;background-color:black;">
<div style="width:30px;height:20px;background-color:#fff;"></div>
</div>
<!-- 子按钮 -->
<!-- 按钮栏 -->
<div class="item" style="width:180px;height:30px;display:none;background-color:green;">
<div style="width:30px;height:20px;background-color:#fff;"></div>
</div>
<!-- 按钮栏 -->
<!-- 子按钮 -->
<div class="sub_item" style="width:180px;height:30px;display:none;background-color:black;">
<div style="width:30px;height:20px;background-color:#fff;"></div>
</div>
<!-- 子按钮 -->
<!-- 按钮栏 -->
<div class="item" style="width:180px;height:30px;display:none;background-color:blue;">
<div style="width:30px;height:20px;background-color:#fff;"></div>
</div>
<!-- 按钮栏 -->
<!-- 子按钮 -->
<div class="sub_item" style="width:180px;height:30px;display:none;background-color:black;">
<div style="width:30px;height:20px;background-color:#fff;"></div>
</div>
<!-- 子按钮 -->
<!-- 下拉列表拦 -->
<script type="text/javascript">
$("#btn_packinglist").click(function(){

$(".item").slideToggle("fast");
$(".sub_item").hide();
});
$(".item").click(function(){
$(this).next().slideToggle("fast");
$(".item").not(this).next().slideUp();
});

时间： 2024-10-22 19:13:42

jquery 写的折叠菜单的相关文章

第一次来博客园先用jquery写一个简单菜单收缩效果

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title></title>    <script src="jquery-1.7.2.min.js"></script&g

CSS+jQuery打造的折叠菜单面板

Accordion折叠面板,折叠菜单代码,Simple Accordion with CSS & jQuery,鼠标点击后展开,再次点击后折叠起来.网上很常用的手风琴效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&

jquery实现左侧折叠菜单

实现代码如下: <!-- jquery实现左侧折叠菜单 --> <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <style> #container{ width:200px; height:500px; border:1p

Jquery二级简单折叠菜单

写在前面: 1.前端新手 2.欢迎交流 效果图: 代码部分:jquery部分: <script> $(function(){ $("#1,#2").toggle( function(){ var ss=$(this).attr("id"); $(this).children().parent().next().slideDown(1000); }, function(){ $(this).children().parent().next().hide(5

jquery垂直展开折叠手风琴二级菜单

最近新开发一个简单项目,用到左侧两级的菜单.习惯性的去网上扒jquery手风琴效果,结果悲剧了好久…… 是该认认真真去学jquery,练习自己写动画效果了.从理解别人代码开始吧! 注:jquery-1.8.3.min.js需要下载文件放到同级名为js的文件夹里. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery垂直展开折叠手风琴效果</title> <s

jquery两行代码实现侧边栏三级折叠菜单

jquery两行代码实现侧边栏三级折叠菜单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-2.1.1.min.js"></script> </head> <bod

jQuery mobile 学习05 折叠菜单

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getS

jQuery&amp;HTML&amp;CSS3实现垂直手风琴折叠菜单方法讲解

在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代码 首先给出手风琴折叠菜单的HTML代码,如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3垂直手风琴折叠菜单DEMO演示</titl

原创JavaScript Jquery特效之----多重特效折叠菜单(附带详细注释和算法思路)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>折叠菜单</title> <script type="text/javascript" src="js/jquery-2.1.0.js"></script> <script type="text/javascript&