jQuery手机移动端actionsheet底部弹出菜单代码

来源:https://www.sucaihuo.com/js/5289.html 2021-05-10 09:35浏览(257) 收藏

jQuery手机移动端actionsheet底部弹出菜单代码,点击事件可自定义。
jQuery手机移动端actionsheet底部弹出菜单代码
分类:手机特效 > 导航菜单 难易:初级
查看演示 下载资源 下载积分: 20 积分

js代码

<script>
    $(function () {
        //点击菜单
        $('button').click(function () {
            $(this).addClass('menu-active')
            $('.action-sheet').show()
            $('.mask').show()
            $('html').addClass('scroll-mask')
        })
        //关闭弹窗
        $('.close-icon').click(function () {
            $('.action-sheet').hide()
            $('.mask').hide()
            $('html').removeClass('scroll-mask')
        })
        //点击每一项的事件
        $('.action-sheet ul li').click(function () {
            $('.action-sheet').hide()
            $('.mask').hide()
            $('html').removeClass('scroll-mask')

            let num=$(this).attr('num')
            alert('这是第'+num+'个菜单')
        })
        $('.mask').not('.action-sheet').click(function () {
            $('.action-sheet').hide()
            $('.mask').hide()
            $('html').removeClass('scroll-mask')
        })
    })
</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2