js美化下拉菜单,点击空缺外自动收缩-JavaSript-爱易网页

js美化下拉菜单,点击空缺外自动收缩

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

js美化下拉菜单,点击空白外自动收缩
麻烦帮我看下下面的下拉项代码，我点击打开菜单后，鼠标点击别的地方，怎么样让打开的菜单项自动收缩起来呢，谢谢





<!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>

<style>

body,htmy{ margin:0; padding:0;}

div,ul,li{margin:0; padding:0;}

ul,li{list-style:none;}

#macstyle .select_box{height:22px;  width:113px;}

#macstyle div.tag_select{display:block;color:#fff; text-align:left; padding-left:10px;width:113px;height:150px;background:url(http://img.bbs.csdn.net/upload/201309/05/1378377493_953497.gif) no-repeat;line-height:22px;}

#macstyle div.tag_select_hover{display:block;color:#fff;text-align:left; padding-left:10px;width:113px;height:22px;background:url(http://img.bbs.csdn.net/upload/201309/05/1378377493_953497.gif) no-repeat;line-height:22px;}

#macstyle div.tag_select_open{display:block;color:#fff;text-align:left; padding-left:10px;width:113px;height:22px;background:url(http://img.bbs.csdn.net/upload/201309/05/1378377493_953497.gif) no-repeat;line-height:22px;}

#macstyle ul.tag_options{position:absolute;list-style:none;text-align:left; }

#macstyle ul.tag_options li{ background:#414348;display:block;text-align:left; padding-left:10px;width:103px;height:30px;text-decoration:none;line-height:30px;color:#fff;}

#macstyle ul.tag_options li.open_hover{color:#fff; background:#6c6f75;}

#macstyle ul.tag_options li.open_selected{color:#fff;}

</style>

<script>

var selects = document.getElementsByTagName('select');



var isIE = (document.all && window.ActiveXObject && !window.opera) ? true : false;



function $(id) {

	return document.getElementById(id);

}



function stopBubbling (ev) {	

	ev.stopPropagation();

}



function rSelects() {

	for (i=0;i<selects.length;i++){

		selects[i].style.display = 'none';

		select_tag = document.createElement('div');

			select_tag.id = 'select_' + selects[i].name;

			select_tag.className = 'select_box';

		selects[i].parentNode.insertBefore(select_tag,selects[i]);



		select_info = document.createElement('div');	

			select_info.id = 'select_info_' + selects[i].name;

			select_info.className='tag_select';

			select_info.style.cursor='pointer';

		select_tag.appendChild(select_info);



		select_ul = document.createElement('ul');	

			select_ul.id = 'options_' + selects[i].name;

			select_ul.className = 'tag_options';

			select_ul.style.position='absolute';

			select_ul.style.display='none';

			select_ul.style.zIndex='999';

		select_tag.appendChild(select_ul);



		rOptions(i,selects[i].name);

		

		mouseSelects(selects[i].name);



		if (isIE){

			selects[i].onclick = new Function("clickLabels3('"+selects[i].name+"');window.event.cancelBubble = true;");

		}

		else if(!isIE){

			selects[i].onclick = new Function("clickLabels3('"+selects[i].name+"')");

			selects[i].addEventListener("click", stopBubbling, false);

		}		

	}

}





function rOptions(i

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

js美化下拉菜单,点击空缺外自动收缩

相关资料更多>

推荐阅读更多>