使用定时器显示下拉菜单

曾经终败给现在 2022-08-07 00:16 169阅读 0赞

html布局：

首排导航和下拉的内容分成两个div写。

下拉内容：

<div class="slide\_nav">  
            <ul class="smenu">  
                <li>  
                    <a href="\#" style="font-size:16px; color:\#0a4e8f; font-weight:bold;">  
                        <img src="images/slide\_nav.jpg" />网上服务</a>  
                </li>  
                <li>  
                    <a href="\#">  
                        <img src="images/slide\_nav2.jpg" />订舱查阅</a>  
                </li>  
                <li>  
                    <a href="\#">  
                        <img src="images/slide\_nav2.jpg" />GPS动态</a>  
                </li>  
                <li>  
                    <a href="\#">  
                        <img src="images/slide\_nav2.jpg" />仓储服务</a>  
                </li>  
                <li>  
                    <a href="\#">  
                        <img src="images/slide\_nav2.jpg" />船公司服务</a>  
                </li>  
                <li>  
                    <a href="\#">  
                        <img src="images/slide\_nav2.jpg" />阳光积分</a>  
                </li>  
                <li>  
                    <a href="\#">  
                        <img src="images/slide\_nav2.jpg" />单据下载</a>  
                </li>                  
            </ul>  
            <div class="clear"></div>  
        </div>

....

....(等等下拉内容)

js内容：

$(document).ready(function () \{

var timer22 = null;  
    var i22;  
    $(".menu li").hover(function () \{  
            var i22 = $(this).index();  
            var j = $(".menu li").length;  
            $(this).addClass("nav\_ul\_li\_current").siblings("li").removeClass("nav\_ul\_li\_current");  
            if (i22 != 0 && i22 != 3 && i22 != 4 && i22 != 7) \{  
                clearTimeout(timer22);  
                timer22 = setTimeout(function () \{

$(".slide\_nav").eq(i22).slideDown().siblings(".slide\_nav").hide();  
                \}, 30)  
            \} else \{  
                $(".slide\_nav").hide();  
            \}  
        \},  
        function () \{

$(".menu li").removeClass("nav\_ul\_li\_current");  
            timer22 = setTimeout(function () \{  
                $('.slide\_nav').hide();  
            \}, 200)

\});

$(".slide\_nav").hover(function () \{  
        clearTimeout(timer22);  
        $(".menu li").eq(i22).addClass("nav\_ul\_li\_current").siblings("li").removeClass("nav\_ul\_li\_current");  
    \}, function () \{  
        clearTimeout(timer22);  
        timer22 = setTimeout(function () \{  
            $(this).hide();  
            $(".slide\_nav").hide();  
            $(".menu li").removeClass("nav\_ul\_li\_current");  
        \}, 200)

\});

效果：

![20150211144650499][]

[20150211144650499]: /images/20220805/deacc369e67649c390d40f821a50e888.png