シンプルなコードを含む jQuery ドロップダウンメニュー-PHP开发-php.cn

シンプルなコードを含む jQuery ドロップダウンメニュー

高洛峰

リリース： 2016-12-15 16:11:46

オリジナル

1511 人が閲覧しました

私は最近、コードが非常に少ないシンプルな 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>

ログイン後にコピー

以下は 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>

ログイン後にコピー

jQuery ドロップダウンメニューに比べて、コードはシンプルで初心者が読むのに適しています。関連記事については、PHP 中国語 Web サイトに注目してください。