纵向折叠二级菜单(无限点击)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="Cov" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>lefter</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style/style.css" type="text/css" rel="Stylesheet" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/myjs.js" type="text/javascript"></script>
</head>

<body id="lefter">
<strong id="callName">管理员：admin</strong>
<ul id="leftMenu">
<li class="li1">菜单菜单1</li>
<li class="li2">
<ul>
<li><a href="">菜单菜单</a>
</li>
<li><a href="">菜单菜单</a>
</li>
<li><a href="">菜单菜单</a>
</li>
<li><a href="">菜单菜单</a>
</li>
</ul>
</li>
<li class="li1">菜单菜单2</li>
<li class="li2">
<ul>
<li><a href="">菜单菜单</a>
</li>
<li><a href="">菜单菜单</a>
</li>
<li><a href="">菜单菜单</a>
</li>
<li><a href="">菜单菜单</a>
</li>
</ul>
</li>
<li class="li1">菜单菜单3</li>
<li class="li2">
<ul>
<li><a href="">菜单菜单</a>
</li>
<li><a href="">菜单菜单</a>
</li>
<li><a href="">菜单菜单</a>
</li>
<li><a href="">菜单菜单</a>
</li>
</ul>
</li>
<li class="li1">菜单菜单4</li>
<li class="li2">
<ul>
<li><a href="">菜单菜单</a>
</li>
<li><a href="">菜单菜单</a>
</li>
<li><a href="">菜单菜单</a>
</li>
<li><a href="">菜单菜单</a>
</li>
</ul>
</li>
</ul>
</body>

</html>

=======================

/* 通用样式 */

*,
form {
margin: 0;
padding: 0;
}
img {
border: 0
}
body {
font-family: 宋体, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #3d3d3d;
background: #fff;
width: 100%;
height: 100%;
margin: 0 auto 0 auto;
}
ul {
list-style: none;
}
a {
text-decoration: none;
margin: 0 2px 0 2px;
color: #000;
}
a:hover {
text-decoration: underline;
}
html {
height: 100%;
width: 100%;
}
#Cov {
overflow: hidden;
}
#loginBody {
background: url(../images/loginBg.jpg) no-repeat left top;
position: relative;
}
#loginBox {
position: absolute;
top: 230px;
left: 330px;
width: 340px;
}
#loginBox li {
height: 30px;
}
#loginBox li span {
display: block;
width: 80px;
height: 26px;
line-height: 26px;
text-align: right;
float: left;
padding-right: 8px;
color: #FFF
}
.txtSty {
float: left;
width: 200px;
height: 24px;
line-height: 24px;
border: 1px #1570b2 solid;
background: #dcedf9;
font-size: 14px;
}
.txtSty2 {
border: 1px #5eb5f4 solid;
background: #FFF;
}
#img_code {
width: 100px;
}
#loginBut {
width: 101px;
height: 38px;
background: url(../images/loginBut.gif) no-repeat;
border: 0;
float: right;
margin: 20px 45px 0 0;
}
#header {
height: 87px;
background: url(../images/topBg.jpg) repeat-x;
}
#headerMenu {
float: right;
width: 100px;
padding-top: 63px;
}
#headerMenu li {
float: left;
margin-right: 10px;
}
#headerMenu li a {
color: #FFF
}
#drag {
width: 7px;
height: 100%;
text-align: center;
background: url(../images/dragBg.gif) repeat-y;
}
#dgimg {
cursor: pointer;
margin-top: 150px;
}
#lefter {
width: 186px;
height: 100%;
background: #0a3a61;
text-align: center;
}
#callName {
display: block;
width: 186px;
height: 31px;
line-height: 30px;
background: url(../images/menuBg1.jpg) no-repeat;
color: #FFF
}
#leftMenu {
padding-top: 10px;
width: 186px;
}
.li1 {
width: 100%;
height: 31px;
line-height: 31px;
font-weight: bold;
color: #fff;
background: url(../images/menuBg2.jpg);
cursor: pointer;
margin-bottom: 1px;
}
.li2 {
width: 100%;
display: none;
}
.li2 ul li {
width: 100%;
height: 31px;
line-height: 31px;
color: #fff;
background: url(../images/menuBg3.jpg);
cursor: pointer;
margin-bottom: 3px;
}
.li1 a {
color: #FFF
}
.li2 a {
color: #a9d5e0
}
#main {
width: 99.6%;
height: 99.6%;
border: 1px #FFF solid;
background: #d9e5ee;
text-align: center;
}
.myTab {
width: 99.3%;
margin-top: 4px;
overflow: hidden;
position: relative;
z-index: 10;
margin-bottom: -1px;
}
.myTab .tab1 {
display: inline;
height: 25px;
line-height: 25px;
background: url(../images/tab1_l.gif);
float: left;
margin-right: 2px;
padding-left: 5px;
}
.myTab .tab2 {
display: inline;
height: 25px;
line-height: 25px;
background: url(../images/tab2_l.gif);
float: left;
margin-right: 2px;
padding-left: 5px;
}
.myTab .tab1 a,
.myTab .tab2 a {
float: left;
display: block;
width: 80px;
text-align: center;
font-weight: bold;
color: #134a74;
white-space: nowrap;
margin-top: 2px;
}
.myTab .tab2 a {
font-weight: normal;
color: #a5afba;
}
.myTab .tab1 img,
.myTab .tab2 img {
float: left;
}
.cBox {
border: 1px #c8d6e1 solid;
background: #FFF;
width: 99%;
height: 94%;
overflow: auto;
}
.cBox .tabCon {
width: 97%;
margin: 10px;
text-align: left;
display: none;
}
.conT {
color: #7a8791;
padding: 2px 8px;
display: block;
width: 60px;
text-align: center;
white-space: nowrap;
margin: 0 0 -10px 10px;
position: relative;
z-index: 10;
background: #FFF;
}
.conBox {
width: 100%;
overflow: auto;
border: 1px #e6eaed solid;
margin-bottom: 10px;
}
.searForm {
margin: 10px 5px 5px 5px;
background: #F9F9F9
}
.searForm li {
height: 26px;
line-height: 26px;
border-bottom: 1px #c8d6e1 dashed;
}
.searForm li.oddColor {
background: #e8eff5;
}
.searForm li .searLab {
float: left;
display: block;
width: 100px;
text-align: right;
padding-right: 5px;
}
.searForm li .searInput {
float: left;
display: block;
text-align: left;
}
.table1 {
border: 1px #d3dfda solid;
width: 98%;
margin: 10px auto 5px auto;
background: #FFF;
}
.table1 thead {
height: 24px;
width: 100%;
}
.table1 thead td {
background: url(../images/ls4.gif) repeat-x;
font-weight: bold;
color: #2d2d2d
}
.table1 tbody tr {
height: 24px;
line-height: 24px;
background: #f9f9f9;
}
.table1 tbody tr.oddColor {
background: #e8eff5;
}
.table1 tbody tr.overColor {
background: #f2ffc0;
}
.table1 tfoot td {
height: 26px;
line-height: 26px;
background: #eef0e7;
text-align: right;
padding-right: 20px;
}
.alignL {
text-align: left;
padding-left: 10px;
}
.alignM {
text-align: center;
}
.alignR {
text-align: right;
padding-right: 10px;
}

==========================

$(function(){

$(".li2").slideUp("slow");
$(".li2:eq(0)").slideDown("slow");

$(".li1").live("click",function(){
var flag = $(this).next().css("display");

if(flag==‘none‘){
$(this).next().slideDown("slow");
}else{
$(this).next().slideUp("slow");
}
});

});

======================

这个区别于上一个纵向，这个是可以无限点击一级菜单的，同时展开二级菜单，可以同时展现

上一个是只能点击一个一级菜单，展现一个二级菜单，不能同时展现，注意区别

时间： 2024-10-01 02:28:50

纵向折叠二级菜单(无限点击)的相关文章

纵向折叠二级菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html id="Cov" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>lef

JavaScript处理数据完成左侧二级菜单的搭建

我们在项目中应用的后台管理框架基本上都是大同小异,左侧是一个二级菜单,点击选中的菜单,右侧对应的页面展示.我把前端页面封装数据的过程整理了一下,虽然不一定适合所有的管理页面,仅作为案例来参考,只是希望大家能明白实现原理就好. 左侧的菜单的搭建: 1.首先将我们需要应用的菜单导入数据库. 下面的截图是我导入的数据: 根据我的业务需求,我需要四个父菜单,所以我将他们的pid字段都设置为0,子菜单的pid字段对应的是父菜单的id,这很重要.url字段就是点击该菜单时,右侧页面显示的地址路径.statu

jquery实现后台系统左侧菜单的点击展开/收缩二级菜单效果

html: <div class="col-sm-3 col-md-2 sidebar"> <div class="totalt"><a>系统管理系统</a></div> <ul class="menu"> <li class="title"> <a class="item item1"><span cla

jQuery 二级菜单，一次显示一个小类 鼠标点击显示小类

jQuery 二级菜单,一次显示一个小类 鼠标点击显示小类 本例有另外2个关联案例,演示地址分别为2.php,3.php 演示 XML/HTML Code <div class="arrowlistmenu"> <h3 class="menuheader expandable">表单</h3> <ul class="categoryitems"> <li><a href="

一级菜单 二级菜单的联动

1.页面代码:单个集合循环生成一级和二级菜单 /* <c:forEach var="m" items="${list}" >                              <c:if test="${m.mb.father eq '-1' }">                                   <input type="checkbox" name="me

jQuery实现横向纵向下拉菜单

学习javascript中有提到构建自己的javascript库,比如jQuery,这些库中包含自己常用的方便的小函数,这些函数可以让自己的代码更加清晰易懂,而且当别人调用时也很容易理解,当然编写库时需要注意一些问题,比如大小写.括号引号.换行等,这些为jQuery学习提供了一些基础,jQuery的学习主要通过几个实例来了解jQuery的应用,通过查看API运用特定方法实现自己的效果,它让网页动了起来.通过代码如何实现一个横向和纵向下拉菜单的效果. 首先在HTML中通过ul和li表示页面中的菜单

Android学习笔记之横向二级菜单实现

PS:元旦来一发. 学习内容: 1.Android二级横向菜单的实现过程.效果如上图...   这种横向的二级菜单在很多的app都有所应用.效果看起来还是非常的美观的.也算是项目需要,自己也就学了一下这个效果,首先说一下逻辑.实现的方式其实并不是很难..只不过逻辑上可能有点复杂.原理其实就是一个按钮.当触发按钮的时候弹出PopWindow.PopWindow由两个ListView构成..对两个ListView适当的适配.就可以实现这个效果了..   实现这种效果可以有两种不同的方式..一种是直接

联动二级菜单实现

参照美团app下拉式的二级列表菜单,公司项目中也有这种菜单的需求                    1,结构分析 首先,我们给出这个下来菜单需要的组建.我们用线框图来分析. 1)如上图所示,最外围的是一个Activity,顶部包含了一个View的容器,这个容器主要是装载ToggleButton来实现诸如美团里面的“美食,全城,理我最近,刷选”这一行.这一行一点就会弹出对应的下来菜单. 2)下拉菜单是如何实现的呢?,这里我们利用了PopupWindow来实现这一弹出式窗口.然后我们在弹出式窗口

鼠标事件-二级菜单

1.用到的包和方法 需求导入ActionChains包: from selenium.webdriver.common.action_chains import ActionChains 2.需求 鼠标移动到页面中某按钮或菜单,自动弹出二级菜单或下拉菜单,再自动点击其中的二级菜单或下拉列表.以百度首页"更多产品"--"糯米"为例. 3.代码实现 1 # encoding=utf-8 2 from selenium import webdriver 3 from se