js效果——如何进行菜单折叠_js實現將二級菜單改為tree,tree可折疊選中-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_51074727/article/details/108909331

本文介绍了如何利用JavaScript来创建HTML菜单的折叠效果。通过示例代码展示具体实现过程，帮助读者理解JavaScript在交互式网页设计中的应用。

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

js代码：


$(function () {
    $(".module_up_down").click(function () {
        var $this = $(this);///选择出鼠标所点击的内容

        $this.prev().slideToggle(1000, function () {获取点击元素的上一个同级元素并添加滑动开关完成后并执行另一个function方法

            var img = $this.children().attr("src");获取所选择的子元素的src属性;
            if (img == "images/down.gif") {///如果img 路径=="images/down.gif"
                img = "images/up.gif";///则让img的路径更换为="images/up.gif"
            } else {///如果img 路径=="images/up.gif"
                img = "images/down.gif";///则让img 路径=="images/down.gif"
            }

            //$this.attr("src", img);
            $("img", $this).attr("src", img);///（选择出标签为img，当前鼠标点击的）添加其src属性为img
        });


    })
})

html：代码


                <div class="scrollNews">
                    <ul>
                        <li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
                        <li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
                        <li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
                        <li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
                        <li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
                        <li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
                        <li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
                    </ul>
                </div>
                <p class="module_up_down"><img src="images/down.gif" alt="" /></p>
            </div>

效果图：