一个jQuery下拉菜单，代码简单-PHP开发-php.cn

Maison

php教程

PHP开发

一个jQuery下拉菜单，代码简单

高洛峰

Dec 15, 2016 pm 04:11 PM

最近发现一个简单的jQuery下拉菜单，代码很少，很适合有基础的新手学习提高。
这是jQuery代码：

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("ul.subnav").parent().append("<span></span>"); 
    
    $("ul.topnav li span").click(function() { 
        $(this).parent().find("ul.subnav").slideDown(&#39;fast&#39;); 
        $(this).parent().hover(function() { 
        }, function(){    
            $(this).parent().find("ul.subnav").slideUp(&#39;slow&#39;); 
        }); 
    
        }).hover(function() { 
            $(this).addClass("subhover"); 
        }, function(){    //On Hover Out 
            $(this).removeClass("subhover"); 
    }); 
}); 
</script>

Copier après la connexion

下面是html代码：

<div id="header"> 
        
        <ul class="topnav"> 
            <li><a href="#">首页</a></li> 
            <li> 
                <a href="#">原创作品</a> 
                <ul class="subnav"> 
                    <li><a href="#">绘画艺术</a></li> 
                    <li><a href="#">平面设计</a></li> 
                    <li><a href="#">交互设计</a></li> 
                    <li><a href="#">3D艺术</a></li> 
                    <li><a href="#">摄影艺术</a></li> 
                    <li><a href="#">其他艺术</a></li> 
                </ul> 
            </li> 
            <li> 
                <a href="#">设计素材</a> 
                <ul class="subnav"> 
                    <li><a href="#">Sub Nav Link</a></li> 
                    <li><a href="#">Sub Nav Link</a></li> 
                    <li><a href="#">Sub Nav Link</a></li> 
                    <li><a href="#">Sub Nav Link</a></li> 
                    <li><a href="#">Sub Nav Link</a></li> 
                    <li><a href="#">Sub Nav Link</a></li> 
                </ul> 
            </li> 
            <li> 
                <a href="#">佳作欣赏</a> 
                <ul class="subnav"> 
                    <li><a href="#">Sub Nav Link</a></li> 
                    <li><a href="#">Sub Nav Link</a></li> 
                    <li><a href="#">Sub Nav Link</a></li> 
                    <li><a href="#">Sub Nav Link</a></li> 
                    <li><a href="#">Sub Nav Link</a></li> 
                    <li><a href="#">Sub Nav Link</a></li> 
                </ul> 
            </li> 
            <li><a href="#">论坛</a></li> 
            <li><a href="#">网址导航</a></li> 
        </ul> 
    </div>

Copier après la connexion

更多一个jQuery下拉菜单，代码简单，适合新手阅读。相关文章请关注PHP中文网！

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn