7菜单收缩展开

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <style type="text/css">
 7         * {
 8             font-family: 微软雅黑;
 9         }
10
11         #leftMenu {
12             border: 1px solid #000;
13             width: 260px;
14         }
15
16             #leftMenu .menu {
17                 padding: 0px;
18                 margin: 0px;
19             }
20
21                 #leftMenu .menu .tit {
22                     background-color: #0094ff;
23                     color: #fff;
24                     padding: 5px 20px;
25                     text-align: center;
26                 }
27     </style>
28     <script src="Scripts/jquery-1.8.2.min.js"></script>
29     <script type="text/javascript">
30         $(function () {
31             $(".tit").click(function () {
32                 //slideDown展开
33                 //slideUp 收缩
34               //  $(this).next().slideToggle();
35                 $(this).next().slideDown().parent().siblings().children(".content").slideUp();//
36             });
37         });
38     </script>
39 </head>
40 <body>
41     <div id="leftMenu">
42         <ul class="menu">
43             <li class="tit">系统管理</li>
44             <li class="content">
45                 <ul>
46                     <li content="广州小蛮腰1">广州小蛮腰1</li>
47                     <li content="广州小蛮腰2">广州小蛮腰2</li>
48                     <li content="广州小蛮腰3">广州小蛮腰3</li>
49                     <li content="广州小蛮腰4">广州小蛮腰4</li>
50                     <li content="广州小蛮腰5">广州小蛮腰5</li>
51                 </ul>
52             </li>
53
54         </ul>
55
56
57         <ul class="menu">
58             <li class="tit">用户管理</li>
59             <li class="content">
60                 <ul>
61                     <li content="广州小蛮腰1">广州小蛮腰1</li>
62                     <li content="广州小蛮腰2">广州小蛮腰2</li>
63                     <li content="广州小蛮腰3">广州小蛮腰3</li>
64                     <li content="广州小蛮腰4">广州小蛮腰4</li>
65                     <li content="广州小蛮腰5">广州小蛮腰5</li>
66                 </ul>
67             </li>
68
69         </ul>
70     </div>
71 </body>
72 </html>

7菜单收缩展开

时间: 2024-10-04 05:48:19

7菜单收缩展开的相关文章

收缩展开菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>收缩展开菜单</title> <style type="text/css"> p,ul,li{padding:0;margin:0;list-style: none;} #box{font-size: 12px;color:#

jQuery实现收缩展开左边栏

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="Frame_Index" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server&quo

第一次来博客园先用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

C#使用splitContainer控件制作收缩展开面板

C#使用splitContainer控件制作收缩展开面板 原创 2011年07月19日 17:18:02 标签: c# / object / 扩展 / 测试 15690 最近对Squid Ink公司的一款PC端软件系统上的一个收缩伸展面板很感兴趣,加上自己做的喷码机数据管理系统的界面非常单调,想在现在界面的基础上将这个功能加上去.我个人只是写c#的一个菜鸟,在网上查了C#的很多控件,很多人都是用GroupBox和SplitContainer实现的,于是就对这两个控件进行了测试.附Squid In

cookie 保存导航菜单的展开状态

菜单展开状态保存,最开始是用session来存的,用session存没点击一次菜单就会多次访问后台页面,影响页面加载速度,后来改用js的cookie来存:代码如下 //获取cookie function GetCookie(name) { var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)")); if (arr != null) { return unescape(a

自定义菜单收起展开动画

最近需求sama联合美工娘娘又改了界面,整体的界面是华丽了不少,但是大神何必为难弱智儿童的我呢,下面先看看新界面~ 很经典的菜单设计,不过毕竟是版本更迭,不适合在原有基础上大修改改,菜单总共分了4个父菜单和若干个子菜单,点击父菜单会隐藏子菜单,其中还要有收起展开动画,这个首先令我想起了expanedlistview.说动手就动手,花了几分钟先写个demo测试以下吧. <?xml version="1.0" encoding="utf-8"?> <R

jQuery--左侧菜单收缩隐藏

实现步骤: 步骤一. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 <!DOCTYPE html> <html lang="en"> <head>     <meta charset=&q

为多菜单折叠效果,设置+-符号,标识当前菜单是否展开

1 <style type="text/css"> 2 body { margin: 0px; padding: 0px; } 3 span{ 4 font-size: 25px; 5 } 6 </style> 7 <body> 8 <div class="menu-wrap"> 9 <span id="icon1" style="width: 25px;height: 25px;d

博客园细节美化,打磨

原作者 感谢 @Summertime-Wu 巨佬写出这样漂亮简洁的主题,本蒟蒻是在原主题的基础上改的. 原主题地址:https://www.cnblogs.com/summertime-wu/p/9356736.html. 我的优化 添加 fork me on github 角标,节省菜单空间 在页首代码中添加了以下内容: <div class="forkme"> <a href="https://github.com/ethan-enhe">