关于下拉菜单的显示的两种jQuery方法

提高访客体验，各个网站有不同的方法，如添加滑动锚点，Ajax无刷新异步效果及各种特效。

有的时候我们会用到一长窜的列表，包含在<li>标签中，如rss订阅的选择。这些结构一般都是：

<div id=”rssfeed”>
         <ul id=””>
                 <li>rss1</li>
                 <li>rss2</li>
                      ……
         </ul>
</div>

如果直接在页面上显示出来，显得既长又无美感，我们可以将一长串的这些隐藏起来，需要时再显示即可。

关于鼠标动作，JavaScript里定义了mouseover和mouseout来标识鼠标在目标上的移上移下，还有一种，就是css里定义.hover，写过接触过基本网页知识都应该知道这是鼠标放到链接目标上的属性定义。所以，我们就有了两种方法来实现隐藏目标<ul>的方法。

最简单的做法是用jQuery来实现，jQuery强大的选择器功能可以让我们少些很多JavaScript代码，而且其提供了很好的简单易用动画效果。

第一种，mouseover和mouseout。Demo请查看本站右上角RSS Feed效果

html结构为：

<a href="/feedurl" id="#feedrss">rssfeed<a>
            <ul id="theli">
                <li><a href="">feedtool</a><li>
                <li><a href="">feedtool</a><li>
                <li><a href="">feedtool</a><li>
                    ……
            </ul>

JavaScript代码为：

$(document).ready(function(){
$(‘#feedrss, #theli’).mouseover(function() {
if(window.cool) clearTimeout(window.cool);//清除时间设定
$(‘#theli’).slideDown("slow");//设置显示及显示的效果
});
$(‘#feedrss,#theli’).mouseout(function() {
window.cool = setTimeout(function() {//设置延时执行
$(‘theli’).fadeOut(20);//设置隐藏及隐藏的效果
}, 200);
});
});

第二种，.hover模式。查看Demo

这个方法需要配合css，将包含li的<ul>设置为隐藏display:none;

html结构：

<li class="feed">
        <a class="rssfeed">feerss</a>
            <ul>
                <li><a href="#" rel="nofollow">鲜果订阅</a></li>
                <li><a href="#" rel="nofollow">Google订阅</a></li>
                <li><a href="#" rel="nofollow">抓虾订阅</a></li>
                <li><a href="#" rel="nofollow">有道订阅</a></li>
                <li><a href="#" rel="RSS">更多方式 &raquo;</a></li>
            </ul>
    </li>

其中css中要先设置 li.feed ul{display:none;}/*隐藏掉ul*/
                           a.rssfeed{cursor:pointer;}/*鼠标移上去变为手指状*/

javascript代码：

$(function(){
$(".dropdown").hover( //设定包含feed属性的对象的.hover属性
function(){ $("li ul").slideToggle(800);}, //包含li 的 ul，用slideToggle()方法显现
function(){$("li ul").slideUp(800)}
) ;
});

OK,完毕，有错误欢迎指正。