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

18 篇文章 0 订阅

注意:用到了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 οnclick="xydown(this)" class="downxy">计算机科学与技术</li>
					<li οnclick="xydown(this)" class="downxy">通信工程</li>
					<li οnclick="xydown(this)" class="downxy">艺术与设计</li>
					<li οnclick="xydown(this)" class="downxy">地质勘测</li>
					<li οnclick="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 οnclick="zydown(this)" class="downzy" id="lazy">网络工程</li>
					<li οnclick="zydown(this)" class="downzy" id="lazy">信息安全</li>
					<li οnclick="zydown(this)" class="downzy" id="lazy">web攻防</li>
					<li οnclick="zydown(this)" class="downzy" id="lazy">路由交换</li>
					<li οnclick="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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值