jQuery简洁nav切换功能

最新推荐文章于 2022-02-14 15:33:24 发布

小涂

最新推荐文章于 2022-02-14 15:33:24 发布

阅读量266

点赞数

本文链接：https://blog.youkuaiyun.com/dulo2005/article/details/50945485

版权

自己做的nav切换效果，希望朋友们看到后，如果有什么问题，可以给我留言
<div id="menu">
    <div class="nav">点击显示和隐藏</div>
    <div class="list">
        <ul>
            <li>下拉</li>
            <li>下拉</li>
            <li>下拉</li>
            <li>下拉</li>
            <li>下拉</li>
            <li>下拉</li>
            <li>下拉</li>
        </ul>
    </div>
    <div class="nav">点击显示和隐藏2</div>
    <div class="list">
        <ul>
            <li>下拉122</li>
            <li>下拉122</li>
            <li>下拉122</li>
            <li>下拉122</li>
            <li>下拉122</li>
            <li>下拉122</li>
            <li>下拉122</li>
        </ul>
    </div>
</div>

 <script type="text/javascript">
        $("#menu").children(".list").hide("fast");

        $("#menu").children(".nav").click(function () {
            
            $("#menu").children(".list").hide("fast");
            
            $(this).next().show("fast");
            
        });
    </script>