Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

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

div中设置line-height,影响li中的展开动画,请问这是为什么?怎么解决?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding:0}
        li {list-style: none;}
        .nav {
            margin: 50px 0 0 50px;
            width:300px;height: 50px;
        }
        .nav>li {
            width: 100px;height: 50px;
            text-align: center;line-height: 50px;
            background-color: antiquewhite;
            cursor: pointer;
            float: left;
        }
        .nav>li:hover{background-color: rgb(194, 181, 165);}
        .sub {
            display: none;
            background-color: rgb(99, 89, 75);
            color: white;
        }
        .sub>li:hover {background-color: rgb(156, 142, 121);}
        .box {
            width: 300px;height: 300px;
            background-color: orange;
            margin: 0px 0 0 50px;
            text-align: center;
            /* 添加line-height属性导致一级菜单2展开失败 */
            line-height: 300px;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>一级菜单1
            <ul class="sub">
                <li>二级菜单1</li>
                <li>二级菜单2</li>
                <li>二级菜单3</li>
                <li>二级菜单4</li>
                <li>二级菜单5</li>
                <li>二级菜单6</li>
                <li>二级菜单7</li>
                <li>二级菜单8</li>
            </ul>
        </li>
        <li>一级菜单2
            <ul class="sub">
                <li>二级菜单1</li>
                <li>二级菜单2</li>
                <li>二级菜单3</li>
                <li>二级菜单4</li>
                <li>二级菜单5</li>
                <li>二级菜单6</li>
                <li>二级菜单7</li>
                <li>二级菜单8</li>
            </ul>
        </li>
        <li>一级菜单3
            <ul class="sub">
                <li>二级菜单1</li>
                <li>二级菜单2</li>
                <li>二级菜单3</li>
                <li>二级菜单4</li>
                <li>二级菜单5</li>
                <li>二级菜单6</li>
                <li>二级菜单7</li>
                <li>二级菜单8</li>
            </ul>
        </li>
    </ul>
    <div class="box">我是另一个元素</div>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $('.nav>li').mouseenter(function(){
            $(this).children('.sub').stop()
            $(this).children('.sub').slideDown(500)
        })
        $('.nav>li').mouseleave(function(){
            $(this).children('.sub').stop()
            $(this).children('.sub').slideUp(100)
        })
    </script>
</body>
</html>

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

1 Reply

0 votes
by (71.8m points)

就算去掉那里的 line-height ,稍加修改,把 .box 里面的内容加多也写,你就会发现每个菜单都会有问题,原因当你移动时是鼠标的位置处在了 .box 上去了,li 因为 .nav li 的高度限制失去了焦点。

图片.png

要想解决这个问题,简单点儿,就是给 .sub 设置 position: absolute; 只不过,你需要从新单独设置 .sub 的 width ,因为他现在 position: absolute; 已经不属于 .nav li 的文档流了,如果你使用 width: 100% ,结果会超出意外


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...