Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
550 views
in Technique[技术] by (71.8m points)

如何使二级菜单被点击时不响应slideUp动画,即仅在点击一级菜单时响应动画?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>多级菜单</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        .nav {
            list-style: none;
            width: 300px;
            margin: 50px 0 0 50px;
        }
        .nav>li {
            border: 1px solid black;
            line-height: 35px;
            border-bottom: none;
            text-indent: 2em;
            position: relative;
        }
        .nav>li:last-child{
            border-bottom: 1px solid black;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        .nav>li:first-child{
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        .nav>li>span {
            background: url(/5-jQuery/img/1-23-2 jq动画练习-箭头.png) no-repeat center center;
            display: inline-block;
            width: 32px;height: 32px;
            position: absolute;
            right: 50px;
            transition: 0.3s linear;
        }
        .sub {display: none;}
        .sub>li{
            list-style: none;
            background-color: blanchedalmond;
            border-bottom: 1px solid rgb(253, 253, 253);
        }
        .sub>li:hover{
            background-color: rgb(143, 130, 110);
        }
        .current>span {
            transform: rotate(90deg);
        }
    </style>
    
</head>
<body>
    <ul class="nav">
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>
    
    <script src="jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        // 可展开菜单,允许自己隐藏自己的二级菜单
        $('.nav>li').click(function(event){
            event.stopPropagation()
            event.cancelBubble = true
            // 2.1 获取当前一级菜单的展开状态
            var $con = $(this).children('.sub').css('display');
            // 2.2 判断状态:隐藏时展开二级菜单,旋转箭头;展开时隐藏二级菜单,还原箭头
            if($con == 'none'){
                $(this).children('.sub').slideDown(500)
                $(this).addClass('current')
            }else if($con == 'block'){
                $(this).children('.sub').slideUp(500);
                $(this).removeClass('current')
            }
        })
    </script>
    <!-- 问题:点击二级菜单时,二级菜单也会执行slideUp动画。如何将slideUp动画仅应用在一级菜单上。推测可能是冒泡影响的,但是取消后还是老样子,求教各位。             -->
</body>
</html>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

事件冒泡呗?

通过 event 可以获取触发事件的 dom,然后判断 parent 是否为.nav


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...