《
2級下拉菜單之CSS兼容和JS事件冒泡問題》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302331202013.htm
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<head>
<title>2級下拉菜單之CSS兼容跟JS事件冒泡問題 </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="JavaScript" type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(function () {
/* $("#mainNav .item").mouseover(function() {
var $ul = $(this).find("ul");
$ul.slideDown(500)
})
$("#mainNav .item").mouseout(function () {
var $ul = $(this).find("ul");
$ul.slideUp(500);
})*/
/* 當(dāng)鼠標(biāo)從SPAN中一出來時(shí)觸發(fā)了mouseout事件因?yàn)槭录芭菀矂?dòng)身了.item的onmouseout事件二級菜單消逝，但此時(shí)又移入了item又觸發(fā)了mouseover事件所以又顯示出來。這時(shí)就會呈現(xiàn)先消散在出來的情形。
*/
$("#mainNav .item").hover(
function() {
var $ul = $(this).find("ul");
$ul.slideDown(500);
},
function () {
var $ul = $(this).find("ul");
$ul.slideUp(500);
}
)
/*
$("#mainNav .item").each(function(){
var $thisItem = $(this);
$thisItem.hover(
function () {
var $thisUl = $thisItem.find("ul");
//$thisUl.slideToggle(500);
$thisUl.slideDown(500);
},
function(){
var $thisUl = $thisItem.find("ul");
$thisUl.slideUp(500)
}
);
});
*/
/* $("#mainNav .item span").mouseover(function() {
var $ul = $(this).next();
$ul.show()
})
$("#mainNav .item").mouseout(function () {
var $ul = $(this).find("ul")
$ul.hide();
})
*/
})
//
</script>
--> [
網(wǎng)站建設(shè)之]2級下拉菜單之CSS兼容和JS事件冒泡問題
div.test{ height:30px; width:50px; margin-left:50px; border:1px solid #ccc}
</style>
</head>
<body>
<ul id="mainNav">
<li class="item">
<span><strong>消息</strong></span>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li class="item">
<span> <strong>產(chǎn)品</strong></span>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li class="item">
<span><strong>公司</strong></span>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
<style type="text/css">
body{ margin:10 auto; padding:0; font-size:14px;}
ul,li{ margin:0; padding:0}
Tag： 下拉菜單 CSS兼容 事件冒泡 下拉菜單 CSS兼容 事件冒泡
#mainNav{ list-style-type:none}/*在IE中給ul設(shè)置了list-style-type會將運(yùn)用到所有子li中，F(xiàn)F中只會利用到1級的li*/
#mainNav li.item { float:left; margin-left:50px; width:80px; *display:inline; /*for ie 6*/ }
#mainNav li.item span{ text-align:center; display:block; width:98%;border:1px solid #000;}
#mainNav li.item ul{list-style-type:none;}/*FF須要從新給ul設(shè)置list-style-type*/
#mainNav li.item ul{ display:none; background-color:#CCC}
相關(guān)的主題文章：
(責(zé)任編輯：網(wǎng)站建設(shè))
2級下拉菜單之CSS兼容和JS事件冒泡問題相關(guān)文章