Ein jQuery-Dropdown-Menü mit einfachem Code

Ich habe kürzlich ein einfaches jQuery-Dropdown-Menü mit sehr wenig Code entdeckt, das sich sehr gut für Anfänger mit Grundkenntnissen zum Lernen und Verbessern eignet.
Dies ist der jQuery-Code:

<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>

Hier ist der HTML-Code:

<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>

Mehr jQuery Im Dropdown-Menü ist der Code einfach und für Anfänger lesbar. Für verwandte Artikel achten Sie bitte auf die chinesische PHP-Website!