点击空白处隐藏的有关问题，前辈们给点指教呐-JavaSript-爱易网页

点击空白处隐藏的有关问题，前辈们给点指教呐

日期：2014-05-16　浏览次数：20322 次

点击空白处隐藏的问题，前辈们给点指教呐。



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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<link rel="stylesheet" href="css/base.css" type="text/css" />

<style type="text/css">

.box{width:200px;margin:0 auto;display:table;margin-top:20px;}

.lable1{width:200px;float:left;position:relative;}

.box div span{width:190px;height:25px;line-height:25px;border:1px solid #666;padding-left:8px;font-size:14px;display:block;}

.box div dl{height:200px;overflow-x:hidden;overflow-y:auto;position:absolute;top:27px;display:none;}

.box div dl dd{width:200px;padding-top:1px;}

.box div dl dd a{width:200px;display:block;line-height:30px;color:#900;background:#CCC;font-size:15px;text-align:center;}

.box div dl dd a:hover{color:#ccc;background:#900;}

</style>

<script language="javascript" src="js/jquery.min.js"></script>

<script language="javascript">

$(function(){

	$(".lable1").silder();		   

});

;(function($) {

	$.fn.silder = function(){

		var $this=this,

			span=$this.find("span"),

			dl=$this.find("dl");

			a=dl.find("a");

		span.click(function(){

				dl.stop(true,true).slideDown();								  

		});

		a.click(function(){

			span.text(this.innerHTML);

			dl.stop(true,true).slideUp();

		});

		$(document).click(function(){

			dl.stop(true,true).slideUp();

		});

	};

})( jQuery ); 

</script>

</head>

<body>

<div class="box">

	<div class="lable1">

    	<span></span>

        <dl>

        	<dd><a href="javascript:void(0)">下拉菜单一</a></dd>

        	<dd><a href="javascript:void(0)">下拉菜单二</a></dd>

        	<dd><a href="javascript:void(0)">下拉菜单三</a></dd>

        	<dd><a href="javascript:void(0)">下拉菜单四</a></dd>

        	<dd><a href="javascript:void(0)">下拉菜单五</a></dd>

        	<dd><a href="javascript:void(0)">下拉菜单六</a></dd>

        	<dd><a href="javascript:void(0)">下拉菜单七</a></dd>

        	<dd><a href="javascript:void(0)">下拉菜单八</a></dd>

        	<dd><a href="javascript:void(0)">下拉菜单九</a></dd>

        	<dd><a href="javascript:void(0)">下拉菜单十</a></dd>

        	<dd><a href="javascript:void(0)">下拉菜单十一</a></dd>

        </dl>

    </div>

</div>

</body>

</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

点击空白处隐藏的有关问题，前辈们给点指教呐

相关资料更多>

推荐阅读更多>