jquery 实现简单的手风琴效果

Posted 2020-11-19 LCFLY

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery 实现简单的手风琴效果相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/jquery.min.js"></script>
    <style>
        body,html,ul,li,h3{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        li{
            line-height: 50px;
            width: 200px;
            text-align: center;
            background-color: aqua;
            cursor: pointer;
        }
        li ul{
            display: none;
        }
        li ul li {
            background-color: #caff95;
        }


    </style>
</head>
<body>
<ul>
    <li class="parent_list">
        <h3>导航1</h3>
        <ul>
            <li>导航1</li>
            <li>导航1</li>
            <li>导航1</li>
        </ul>
    </li>
    <li class="parent_list">
        <h3>导航1</h3>
        <ul>
            <li>导航1</li>
            <li>导航1</li>
            <li>导航1</li>
        </ul>
    </li>
    <li class="parent_list">
        <h3>导航1</h3>
        <ul>
            <li>导航1</li>
            <li>导航1</li>
            <li>导航1</li>
        </ul>
    </li>
    <li class="parent_list">
        <h3>导航1</h3>
        <ul>
            <li>导航1</li>
            <li>导航1</li>
            <li>导航1</li>
        </ul>
    </li>

</ul>
<script>
    $(function () {
        $(document).on("click", \'h3\', function (e) {
            $(this).siblings(\'ul\').slideToggle();
            $(this).parent().siblings(\'li\').children(\'ul\').slideUp();
       })
    })
</script>
</body>
</html>

以上是关于jquery 实现简单的手风琴效果的主要内容，如果未能解决你的问题，请参考以下文章

214 jQuery案例：王者荣耀手风琴效果

jQuery实现手风琴效果