간단한 코드가 포함된 jQuery 드롭다운 메뉴-PHP开发-php.cn

간단한 코드가 포함된 jQuery 드롭다운 메뉴

高洛峰

풀어 주다： 2016-12-15 16:11:46

원래의

1550명이 탐색했습니다.

최근에 코드가 거의 없는 간단한 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 중국어 홈페이지를 주목해주세요!