jQuery简洁nav切换功能

最新推荐文章于 2022-01-21 14:46:59 发布

原创最新推荐文章于 2022-01-21 14:46:59 发布 · 281 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用JavaScript实现的自定义导航栏（NAV）点击显示和隐藏的下拉列表效果。通过简单的HTML结构和jQuery代码，实现了多个可切换的列表，并详细展示了具体的代码实现。

自己做的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>