点击切换功能

Toggle function on click

本文关键字：功能      更新时间：2023-09-26

我正在研究点击时切换菜单的功能，但由于它在jQuery 1.9中被弃用，因此无法使其工作。

我不知道怎样才能使工作顺利进行。

我想点击一次菜单img并展开菜单，下次我这样做时它会再次隐藏。

这是我的代码:

$(document).ready(function(){
$('.menu img').click(function(){
    var wWidth = $(window).width();
    var wHeight = $(window).height()
    $('.menu').animate({width: wWidth + 'px', height: wHeight + 'px'}, 500);
    $('.menu').toggleClass('menu_expanded');
});

提前感谢。

下面是JSfiddle作为请求:http://jsfiddle.net/czef8ofb/

你可以试试下面的代码——.hasClass()检查你的导航元素是否已经被分配了.menu_expanded类，并相应地显示/隐藏菜单。

$(document).ready(function(){
    $('.menu img').click(function(){
        var wWidth = $(window).width();
        var wHeight = $(window).height()
        if(!$('.menu').hasClass('menu_expanded')){
            $('.menu').animate({width: wWidth + 'px', height: wHeight + 'px'}, 500);
        }else{
            //code to hide menu again
        }
        $('.menu').toggleClass('menu_expanded');
    });
});

根据jQuery文档:

此方法签名在jQuery 1.8中已弃用，并在jQuery 1.9中删除。jQuery还提供了一个名为.toggle()的动画方法来切换元素的可见性。是否触发动画或事件方法取决于传递的参数集。

所以，用这个代替:animation method .toggle()
相关文章：