点击这里给我发消息 点击这里给我发消息

2级下拉菜单之CSS兼容和JS事件冒泡问题

添加时间:2011-8-30
    相关阅读: HTML CSS JavaScript 公司

<!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>
<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);
        })*/
/*        当鼠标从SPAN中一出来时触发了mouseout事件由于事件冒泡也出发了.item的onmouseout事件二级菜单消失,但此时又移入了item又触发了mouseover事件所以又显示出来。这时就会出现先消失在出来的情况。
*/
       
       
    $("#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();
        })
       
        */     
    })
    //http://www.happinesz.cn/archives/1020/

</script>


<style type="text/css">
body{ margin:10 auto; padding:0;  font-size:14px;}
ul,li{ margin:0; padding:0}

#mainNav{ list-style-type:none}/*在IE中给ul设置了list-style-type会将应用到所有子li中,FF中只会应用到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设置list-style-type*/
#mainNav li.item ul{ display:none; background-color:#CCC}

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>产品</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>

</body>
</html>

本文作者:未知
咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册