jQuery slideToggle轻松实现效果不错的垂直下拉菜单

最新推荐文章于 2021-04-18 11:19:53 发布

lifaming15

最新推荐文章于 2021-04-18 11:19:53 发布

阅读量2.2k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/lifaming15/article/details/8803146

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

$(function(){
	$(".v_menu_list li:odd").addClass("alt");	
	$("#menuClick").click(function(){
		$("#vMenuList").slideToggle();	
		return false;
	});
	$(".v_menu_list > li > a").hover(function(){
		$(this).animate({
			paddingLeft: 20				
		},100);									  
	},function(){
		$(this).animate({
			paddingLeft: 5				
		},50);	
	});
});

<div class="zxx_v_menu">
    <div class="click_area" id="menuClick">
        <a class="v_menu" href="#zhangxinxu" hidefocus="true"><span class="rel">垂直导航</span></a>
        <span class="point_out"><span class="point_in">▼</span></span>
    </div>
    <ul class="v_menu_list" id="vMenuList">
        <li><a href="#zhangxinxu">圣诞节</a></li>
        <li><a href="#zhangxinxu">冬至</a></li>
        <li><a href="#zhangxinxu">地震</a></li>
        <li><a href="#zhangxinxu">股市</a></li>
        <li><a href="#zhangxinxu">十月围城</a></li>
        <li><a href="#zhangxinxu">三枪拍案惊奇</a></li>
        <li><a href="#zhangxinxu">蜗居</a></li>
        <li><a href="#zhangxinxu">阿凡达</a></li>
    </ul>
</div>