用jquery如何实现点击一个菜单,同时收拢其他的菜单选项,打开或者关闭当前菜单项。
我的代码是这样写的:
$(document).ready(function(){
$(".main>a").click(function(){
var ulNode = $(this).next("ul");
ulNode.slideToggle(500);
var ulNodeblock = $(".main>a").next("ul");
if(ulNodeblock.css("display")=="block"){
ulNodeblock.css("display","none");
}
});
});
但是这样写,只能保证主菜单1和主菜单2以及主菜单1和主菜单3互相收拢,如果点击主菜单2的时候,再点击主菜单3,那么主菜单2不会收拢,该怎么解决啊?html代码:
<ul>
<li class="main"><a href="#">主菜单1</a>
<ul>
<li><a href="#">子菜单11</a></li>
<li><a href="#">子菜单12</a></li>
<li><a href="#">子菜单13</a></li>
</ul>
</li>
<li class="main"><a href="#">主菜单2</a>
<ul>
<li><a href="#">子菜单21</a></li>
<li><a href="#">子菜单22</a></li>
<li><a href="#">子菜单23</a></li>
</ul>
</li>
<li class="main"><a href="#">主菜单3</a>
<ul>
<li><a href="#">子菜单31</a></li>
<li><a href="#">子菜单32</a></li>
<li><a href="#">子菜单33</a></li>
</ul>
</li>
<ul/>jquery菜单
我的代码是这样写的:
$(document).ready(function(){
$(".main>a").click(function(){
var ulNode = $(this).next("ul");
ulNode.slideToggle(500);
var ulNodeblock = $(".main>a").next("ul");
if(ulNodeblock.css("display")=="block"){
ulNodeblock.css("display","none");
}
});
});
但是这样写,只能保证主菜单1和主菜单2以及主菜单1和主菜单3互相收拢,如果点击主菜单2的时候,再点击主菜单3,那么主菜单2不会收拢,该怎么解决啊?html代码:
<ul>
<li class="main"><a href="#">主菜单1</a>
<ul>
<li><a href="#">子菜单11</a></li>
<li><a href="#">子菜单12</a></li>
<li><a href="#">子菜单13</a></li>
</ul>
</li>
<li class="main"><a href="#">主菜单2</a>
<ul>
<li><a href="#">子菜单21</a></li>
<li><a href="#">子菜单22</a></li>
<li><a href="#">子菜单23</a></li>
</ul>
</li>
<li class="main"><a href="#">主菜单3</a>
<ul>
<li><a href="#">子菜单31</a></li>
<li><a href="#">子菜单32</a></li>
<li><a href="#">子菜单33</a></li>
</ul>
</li>
<ul/>jquery菜单
解决方案 »
- 查看别人的代码时,动态绑定的事件,如何追踪??
- 服务端用node.js 页面用html5 上传整个目录(带子目录) 上传时要选目录
- ExtJs Grid Json 问题
- apache服务器,静态网页。能不能做网站计数器?
- 动态添加的checkbox参数传不过去,请高手指点一二。
- add options 看看有什么问题!
- 网络考试系统请给个思路,关键是考试记时,怎么实现,请给个思路和代码,万分感谢
- 关于ExtJs4 mvc的问题???????????????????/
- 我一组3个加了链接的文本,希望点击后变成另外的颜色,
- 妞妞的问题~~~~~~~~`
- easyui的tab标签update之后无法关闭
- js脚本运行起来卡,请问是什么意思。
$(".main>a").click(function(){
$('ul li ul').slideDown(500);
var ulNode = $(this).next("ul");
ulNode.slideToggle(500);
});
});
改成了$('ul li ul').slideUp(500);
就实现了我想要的效果