将 .toggle(） 添加到 jQuery

Adding .toggle() to a jQuery

本文关键字：jQuery 添加 toggle      更新时间：2023-09-26

我首先尝试向此代码添加.toggle()，以便菜单在单击时动画化，但在单击时也会关闭，然后意识到我不能很好地使用.toggle()中的.animate，所以我正在尝试.click()

如果有办法用单击替换我的mouseenter和mouseleave功能，那就是我正在寻找的。

我已经搜索过，但我找不到任何使用动画菜单完成此操作的地方，因此，这是该函数的 javascript：

$('#sdt_menu > li').bind('mouseenter',function(){
    var $elem = $(this);
    $elem.find('img')
         .stop(true)
         .animate({
            border: '5px solid #000',
            'width':'150px',
            'height':'170px',
            'left':'0px'
         },400,'easeOutBack')
         .andSelf()
         .find('.sdt_wrap')
         .stop(true)
         .animate({'top':'140px'},500,'easeOutBack')
         .andSelf()
         .find('.sdt_active')
         .stop(true)
         .animate({'height':'170px'},300,function(){
        var $sub_menu = $elem.find('.sdt_box');
        if($sub_menu.length){
            var left = '170px';
            if($elem.parent().children().length == $elem.index()+1)
                left = '-170px';
            $sub_menu.show().animate({'left':left},200);
        }    
    });
}).bind('mouseleave',function(){
    var $elem = $(this);
    var $sub_menu = $elem.find('.sdt_box');
    if($sub_menu.length)
        $sub_menu.hide().css('left','0px');
    $elem.find('.sdt_active')
         .stop(true)
         .animate({'height':'0px'},300)
         .andSelf().find('img')
         .stop(true)
         .animate({
            border: "2px solid #FFFFFF",
            'width':'150px',
            'height':'150px',
            'left':'0px'},400)
         .andSelf()
         .find('.sdt_wrap')
         .stop(true)
         .animate({'top':'25px'},500);
});

下面，如果它打开，我添加一个类，如果它关闭，则删除一个类，告诉onclick事件该怎么做。

查看 http://api.jquery.com/toggle-event/。足够简单。

归功于附庸者。

$('#sdt_menu > li').toggle(function(){
    var $elem = $(this);
    var $sub_menu = $elem.find('.sdt_box');
    $elem.find('img')
         .stop(true)
         .animate({
            border: '5px solid #000',
            'width':'150px',
            'height':'170px',
            'left':'0px'
         },400,'easeOutBack')
         .andSelf()
         .find('.sdt_wrap')
         .stop(true)
         .animate({'top':'140px'},500,'easeOutBack')
         .andSelf()
         .find('.sdt_active')
         .stop(true)
         .animate({'height':'170px'},300,function(){
        if($sub_menu.length){
            var left = '170px';
            if($elem.parent().children().length == $elem.index()+1)
                left = '-170px';
            $sub_menu.show().animate({'left':left},200);
        }    
    });
}, function(){      
    var $elem = $(this);
    var $sub_menu = $elem.find('.sdt_box');
    if($sub_menu.length)
        $sub_menu.hide().css('left','0px');     
    $elem.find('.sdt_active')
         .stop(true)
         .animate({'height':'0px'},300)     
         .andSelf().find('img')
         .stop(true)
         .animate({
            border: "2px solid #FFFFFF",
            'width':'150px',
            'height':'150px',
            'left':'0px'},400)
         .andSelf()
         .find('.sdt_wrap')
         .stop(true)
         .animate({'top':'25px'},500);
});

 var isOpen = true;
 $('#sdt_menu > li').click(function(){
       if(isOpen ==  true){
           $(this).hide();
           isOpen = false;
       }else{
           $(this).show();
           isOpen = true;
       }
    }

您可以根据需要设置 isOpen 变量的默认值。

.show（） 和 .hide 是切换函数的扩展功能。

您可以定义一个全局变量，例如var isOpen = true;然后更改代码以单击

$('#sdt_menu > li').on('click', isOpen, function() {
    if (isOpen) {
        // Close
    } else {
        // Open
    }
    isOpen = !isOpen;
});
相关文章：