实现思路:定义了一个层(样式为:“.menu_000”),在这个层里有一个层(样式为“.menu_000 .menu_001”)和一个Ul(样式为:.menu_000)。Ul中放有Li,Li中放有对应的项。初始状态Ul的层的样式中“display:none”,这样菜单就折叠了起来。当点击相应的(“.menu_000 .menu_001”样式)的层时,“Ul”层的样式的display进行切换,从而实现展开和闭合。
对应的CSS:
.menu_000
{
width:155px;
}
.menu_000 .menu_001
{
width:155px;
height:23px;
background-image:url(../Images/main/menu_001.gif);
}
.menu_000 ul
{
list-style-type:none;
text-align:center;
margin-left:7px;
display:none;
}
对应的Jqeury代码:
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$(".menu_001").click(function(i){
var $divcss=$(this);
var display=$divcss.siblings("ul").css("display");
if(display=="none"){
$divcss.siblings("ul").css("display","");
}else{
$divcss.siblings("ul").css("display","none");
}
}) })
</script>现在的问题:
一,展开闭合的功能实现不了,也不知道是哪里有错误。是不是因为用的样式是从“admin.css”文件中引入的
<link href="CSS/admin.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.4.3.min.js" type="text/javascript"></script>这样“jquery-1.4.3.min.js”识别不了?二,怎样修改这里的js代码,才可以实现点击一个层时,这个层的display样式设为""。而刚刚展开的层的display样式则设为“none”。也就是,当打开一个新的时,关闭现在正在打开着的。谢谢各位大侠。
前台相应代码:
<link href="CSS/admin.css" rel="stylesheet" type="text/css" /> <script src="../Scripts/jquery-1.4.3.min.js" type="text/javascript"></script><script type="text/javascript" language="javascript">
$(document).ready(function(){
$(".menu_001").click(function(i){
var $divcss=$(this);
var display=$divcss.siblings("ul").css("display");
if(display=="none"){
$divcss.siblings("ul").css("display","");
}else{
$divcss.siblings("ul").css("display","none");
}
}) })
</script><div class="menu">
<div class="menu_blank">
</div>
<!--菜单选项卡-->
<div class="menu_000">
<div class="menu_001">
<table class="menu_font_table">
<tr>
<td class="menu_font_table_td_001"></td>
<td class="menu_font_table_td_002">
<font class="menu_font" ><a href="#" class="menu_table_a">系统设置</a></font>
</td>
</tr>
</table>
</div>
<ul>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">系统管理</a></td></tr></table></li>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">公告管理</a></td></tr></table></li>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">账号管理</a></td></tr></table></li>
</ul>
</div>
<!--菜单选项卡-->
<div class="menu_000">
<div class="menu_001">
<table class="menu_font_table">
<tr>
<td class="menu_font_table_td_001"></td>
<td class="menu_font_table_td_002">
<font class="menu_font" ><a href="#" class="menu_table_a">快捷菜单</a></font>
</td>
</tr>
</table>
</div>
<ul>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">商务信息</a></td></tr></table></li>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">技术信息</a></td></tr></table></li>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">解惑信息</a></td></tr></table></li>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">寄语信息</a></td></tr></table></li>
</ul>
</div>
<!--菜单选项卡-->
<div class="menu_000">
<div class="menu_001">
<table class="menu_font_table">
<tr>
<td class="menu_font_table_td_001"></td>
<td class="menu_font_table_td_002">
<font class="menu_font" ><a href="#" class="menu_table_a">模块管理</a></font>
</td>
</tr>
</table>
</div>
<ul>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">关于超软</a></td></tr></table></li>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">超软动态</a></td></tr></table></li>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">服务项目</a></td></tr></table></li>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">最新案例</a></td></tr></table></li>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">作品下载</a></td></tr></table></li>
</ul>
</div>
<!--菜单选项卡-->
<div class="menu_000">
<div class="menu_001">
<table class="menu_font_table">
<tr>
<td class="menu_font_table_td_001"></td>
<td class="menu_font_table_td_002">
<font class="menu_font" ><a href="#" class="menu_table_a">图片管理</a></font>
</td>
</tr>
</table>
</div>
<ul>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">Flash图片</a></td></tr></table></li>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">环境图片</a></td></tr></table></li>
</ul>
</div>
<!--菜单选项卡-->
<div class="menu_000">
<div class="menu_001">
<table class="menu_font_table">
<tr>
<td class="menu_font_table_td_001"></td>
<td class="menu_font_table_td_002">
<font class="menu_font" ><a href="#" class="menu_table_a">超链接管理</a></font>
</td>
</tr>
</table>
</div>
<ul>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">超链接管理</a></td></tr></table></li>
</ul>
</div>
</div>
对应的CSS:
.menu_000
{
width:155px;
}
.menu_000 .menu_001
{
width:155px;
height:23px;
background-image:url(../Images/main/menu_001.gif);
}
.menu_000 ul
{
list-style-type:none;
text-align:center;
margin-left:7px;
display:none;
}
对应的Jqeury代码:
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$(".menu_001").click(function(i){
var $divcss=$(this);
var display=$divcss.siblings("ul").css("display");
if(display=="none"){
$divcss.siblings("ul").css("display","");
}else{
$divcss.siblings("ul").css("display","none");
}
}) })
</script>现在的问题:
一,展开闭合的功能实现不了,也不知道是哪里有错误。是不是因为用的样式是从“admin.css”文件中引入的
<link href="CSS/admin.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.4.3.min.js" type="text/javascript"></script>这样“jquery-1.4.3.min.js”识别不了?二,怎样修改这里的js代码,才可以实现点击一个层时,这个层的display样式设为""。而刚刚展开的层的display样式则设为“none”。也就是,当打开一个新的时,关闭现在正在打开着的。谢谢各位大侠。
前台相应代码:
<link href="CSS/admin.css" rel="stylesheet" type="text/css" /> <script src="../Scripts/jquery-1.4.3.min.js" type="text/javascript"></script><script type="text/javascript" language="javascript">
$(document).ready(function(){
$(".menu_001").click(function(i){
var $divcss=$(this);
var display=$divcss.siblings("ul").css("display");
if(display=="none"){
$divcss.siblings("ul").css("display","");
}else{
$divcss.siblings("ul").css("display","none");
}
}) })
</script><div class="menu">
<div class="menu_blank">
</div>
<!--菜单选项卡-->
<div class="menu_000">
<div class="menu_001">
<table class="menu_font_table">
<tr>
<td class="menu_font_table_td_001"></td>
<td class="menu_font_table_td_002">
<font class="menu_font" ><a href="#" class="menu_table_a">系统设置</a></font>
</td>
</tr>
</table>
</div>
<ul>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">系统管理</a></td></tr></table></li>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">公告管理</a></td></tr></table></li>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">账号管理</a></td></tr></table></li>
</ul>
</div>
<!--菜单选项卡-->
<div class="menu_000">
<div class="menu_001">
<table class="menu_font_table">
<tr>
<td class="menu_font_table_td_001"></td>
<td class="menu_font_table_td_002">
<font class="menu_font" ><a href="#" class="menu_table_a">快捷菜单</a></font>
</td>
</tr>
</table>
</div>
<ul>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">商务信息</a></td></tr></table></li>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">技术信息</a></td></tr></table></li>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">解惑信息</a></td></tr></table></li>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">寄语信息</a></td></tr></table></li>
</ul>
</div>
<!--菜单选项卡-->
<div class="menu_000">
<div class="menu_001">
<table class="menu_font_table">
<tr>
<td class="menu_font_table_td_001"></td>
<td class="menu_font_table_td_002">
<font class="menu_font" ><a href="#" class="menu_table_a">模块管理</a></font>
</td>
</tr>
</table>
</div>
<ul>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">关于超软</a></td></tr></table></li>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">超软动态</a></td></tr></table></li>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">服务项目</a></td></tr></table></li>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">最新案例</a></td></tr></table></li>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">作品下载</a></td></tr></table></li>
</ul>
</div>
<!--菜单选项卡-->
<div class="menu_000">
<div class="menu_001">
<table class="menu_font_table">
<tr>
<td class="menu_font_table_td_001"></td>
<td class="menu_font_table_td_002">
<font class="menu_font" ><a href="#" class="menu_table_a">图片管理</a></font>
</td>
</tr>
</table>
</div>
<ul>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">Flash图片</a></td></tr></table></li>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">环境图片</a></td></tr></table></li>
</ul>
</div>
<!--菜单选项卡-->
<div class="menu_000">
<div class="menu_001">
<table class="menu_font_table">
<tr>
<td class="menu_font_table_td_001"></td>
<td class="menu_font_table_td_002">
<font class="menu_font" ><a href="#" class="menu_table_a">超链接管理</a></font>
</td>
</tr>
</table>
</div>
<ul>
<li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">超链接管理</a></td></tr></table></li>
</ul>
</div>
</div>
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货