写过下拉列表一般都会遇到一个问题就是，鼠标覆盖的时候下拉列表显示，但是当鼠标离开的时候下拉列表也跟着消失了。
思路：两种办法解决以上问题；一种是通过css样式控制，布局要求下拉列表box需要被覆盖的标签包起来，假如你使用 ul li 做的导航栏，用ol li做的下拉列表，那么布局就得如下：
<ul> <li> <ol><li></li><li></li><li></li></ol> <!—下拉列表的盒子--> </li> <li> <ol><li></li><li></li><li></li></ol> <!—下拉列表的盒子--> </li> <li> <ol><li></li><li></li><li></li></ol> <!—下拉列表的盒子--> </li>
</ul> |
其中ul为导航项的盒子，li标签就是每一个导航项，ol就是对应下面的那个列表盒子。在css设置的时候可以设置为默认样式为display：none；在hover事件中可以设置为display：block；其中hover可以写到css，也可以写在js事件里面。
另一种布局就是把下拉列表放到导航项外面，就得用jquery方法，布局如下：
<ul> <li></li><!—导航项--> <li></li> <li></li> <li></li> <li></li> </ul> <div> <p></p><!—下拉列表的盒子--> <p></p> <p></p> <p></p>
</div> |
这时候我们 就可以通过浮动或者定位把下拉列表放到相应的位置上，这里不再赘述，主要讲一下jquery代码如何实现。
布局如下：
<div>div</div> <p> <a>1</a> <a>2</a> <a>3</a> <a>4</a> </p> |
样式如下：
<style type="text/css"> div{ 200px;height: 50px;border: 1px solid #000;margin: 0 auto;text-align: center;line-height: 50px;} p{ 200px;height:320px;margin: 0 auto;text-align: center;line-height: 78px; display: none; } a{ display: block;border: 1px solid red; } </style> |
Jquery如下：
第一种：
<script type="text/javascript"> var tick; $("div").hover(function () { clearInterval(tick);//这里非常重要不可省略，目的是为了清除定时器，否则只能执行一次代码效果，以后会受到定时器的干扰。 $("p").show(); }, function () { tick = setInterval(auto, 500) })
$("p").hover(function () { clearInterval(tick); }, function () { tick = setInterval(auto, 500) })
function auto() { $("p").hide(); }
}) </script> |
第二种：
<script type="text/javascript"> var tick; $("div").hover(function () { $("p").css({"display":"block"});//效果和show一样。 $("p").show(); }, function () { tick = setTimeout(function () { $("p").hide(); },500) })
$("p").hover(function () { $("p").css({"display":"block"});//效果和show一样。 $("p").show(); }, function () { $("p").hide(); } </script> |
总结：推荐用第一种，在布局的时候需要考虑清楚，在css就可以实现效果；布局在外面的两种写法再布局的时候比较简单，不会用到那么多标签，制定样式的时候比较方便，其中第一种定时器总会获取服务器资源，占内存比较大，使用推荐第一种。