js效果——如何进行菜单折叠

    科技2022-07-10  127

    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>

     效果图:

     

     

     

    Processed: 0.017, SQL: 8