jQuery微信底部弹出二级子菜单

收藏

分享一款常用的手机微信底部菜单导航，点击即可显示二级下拉菜单，失去焦点便隐藏。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

在#menu放置li菜单

<div id="menu">
    <ul>
        <li>
            <div class="menu_li"><img src="images/coin.png" width="10" />&nbsp;网页特效</div>
            <img class="line" src="images/line.png" width="1">
            <span>
                <img src="images/navbg4.png" width="100%">
                <div>
                    <a href="http://www.erdangjiade.com">html5模板</a>
                    <a href="http://www.erdangjiade.com">手机js特效</a>
                    <a href="http://www.erdangjiade.com">微测试</a>
                    <a href="http://www.erdangjiade.com">微游戏</a>
                </div>
            </span>
        </li>
        <li>
            <div class="menu_li"><img src="images/coin.png" width="10" />&nbsp;手机特效</div>
            <img class="line" src="images/line.png" width="1" />
            <span>
                <img src="images/navbg4.png" width="100%" />
                <div>
                    <a href="http://www.erdangjiade.com">咨询购买</a>
                </div>
            </span>
        </li>
    </ul>
</div>

jQuery

点击li菜单触发事件

window.onload = function() {
    $('#menu ul li').each(function(j) {
        $('#menu ul li').eq(j).removeClass("on");
        $('#menu ul li span').eq(j).animate({bottom: -$('#menu ul li span').eq(j).height()}, 100);
    });
}

$('#menu ul li').each(function(i) {
    $(this).click(function() {
        if ($(this).attr("class") != "on") {
            $('#menu ul .on span').animate({bottom: -$('#menu ul .on span').height()}, 200);
            $('#menu ul .on').removeClass("on");
            $(this).addClass("on");
            $('#menu ul li span').eq(i).animate({bottom: 35}, 200);
            $('.footer_front').show();
        } else {
            $('#menu ul li span').eq(i).animate({bottom: -$('#menu ul li span').eq(i).height()}, 200);
            $(this).removeClass("on");
            $('.footer_front').hide();
        }
    });
});

$('.footer_front').click(function() {
    $('#menu ul .on span').animate({bottom: -$('#menu ul .on span').height()}, 200);
    $('#menu ul .on').removeClass("on");
    $(this).hide();
});