多个选择框自动下拉和隐藏

来源：互联网发布：神魔大陆修改角色数据编辑：程序博客网时间：2024/05/29 19:35

注意：用到了Bootstrap

JSP代码：

<div class="leftclear"><ul class="nav" contenteditable="true"><li class="dropdown"><a data-toggle="dropdown" id="axy"class="dropdown-toggle" href="#">学院<b class="caret"></b></a><ul class="dropdown-menu" id="downxy"><li onclick="xydown(this)" class="downxy">计算机科学与技术</li><li onclick="xydown(this)" class="downxy">通信工程</li><li onclick="xydown(this)" class="downxy">艺术与设计</li><li onclick="xydown(this)" class="downxy">地质勘测</li><li onclick="xydown(this)" class="downxy">文学与园艺</li></ul></li></ul></div><label class="leftclear">      </label><div class="leftclear"><ul class="nav" contenteditable="true"><li class="dropdown"><a data-toggle="dropdown" id="azy"class="dropdown-toggle" href="#">专业 <b class="caret"></b></a><ul class="dropdown-menu" id="downzy"><li onclick="zydown(this)" class="downzy" id="lazy">网络工程</li><li onclick="zydown(this)" class="downzy" id="lazy">信息安全</li><li onclick="zydown(this)" class="downzy" id="lazy">web攻防</li><li onclick="zydown(this)" class="downzy" id="lazy">路由交换</li><li onclick="zydown(this)" class="downzy" id="lazy">软件工程</li></ul></li></ul></div>

JS代码：

/** *  */$(document).ready(function() {function allup() {$("#downxy").slideUp();$("#downzy").slideUp();$("#downbj").slideUp();$("#downkc").slideUp();}//当当前选框选中的时候其他选框收起还原function xyup() {// $("#downxy").slideUp();$("#downzy").slideUp();$("#downbj").slideUp();$("#downkc").slideUp();}function zyup() {$("#downxy").slideUp();// $("#downzy").slideUp();$("#downbj").slideUp();$("#downkc").slideUp();}$("#axy").mouseenter(function() {$("#downxy").slideDown();$(".downxy").click(function() {$("#downxy").slideUp();});xyup();});$("#azy").mouseenter(function() {$("#downzy").slideDown();$(".downzy").click(function() {$("#downzy").slideUp();});zyup();});//这一部分主要是为了达到更好的效果，在jsp中将当前所有选框放在一个div中，然后对当前div添加事件让所有选框还原$("#includediv").mouseenter(function() {allup();});$("#includediv").mouseleave(function() {allup();});});

0 0