看着很好看的手风琴导航栏，其实代码超简单的

本文链接：https://blog.youkuaiyun.com/m0_66208731/article/details/123301665

本文介绍如何使用CSS和JavaScript创建一个手风琴式的图片展示效果，通过排他思想控制图片宽度，鼠标移出时恢复原状。代码示例详细展示了如何在HTML中应用并调整元素的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：利用排他思想，将所有的兄弟全部干掉，然后再把需要展示的图重新设置宽度，最后给大盒子加上一个鼠标移出的点击事件即可完成效果，代码如下：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8" />
    <title>手风琴</title>
    <style>
        ul {
            list-style: none;
        }
        
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 1200px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid red;
            overflow: hidden;
        }
        
        div li {
            width: 240px;
            height: 400px;
            float: left;
            transition: all 500ms;
        }
        
        div ul {
            width: 1200px;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul>
            <li>
                <a href="#">
                    <img src="./images/1.jpg" alt="" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/2.jpg" alt="" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/3.jpg" alt="" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/4.jpg" alt="" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/5.jpg" alt="" />
                </a>
            </li>
        </ul>
    </div>
</body>
<script>
    let box = document.querySelector('#box')
    let liList = document.querySelectorAll('li')
    for (let i = 0; i < liList.length; i++) {
        liList[i].onmouseenter = function() {
            for (let j = 0; j < liList.length; j++) {
                liList[j].style.width = '100px'
                this.style.width = '800px'
            }

        }
    }
    box.onmouseleave = function() {
        for (let i = 0; i < liList.length; i++) {
            liList[i].style.width = '240px'
        }
    }
</script>

</html>

看了这么久，给个赞呗！^_^