使用 jquery 打开第二个侧边栏时如何关闭一个侧边栏？

Question

我有两个侧边栏点击此代码

jQuery('.vinfo_icon').toggle(function() { 
            if(jQuery('#hidden_sidebar').is(':visible')){
                    jQuery('#hidden_sidebar').fadeOut(5);
            }
            if(!jQuery('.teenvoice_smalllogo img').hasClass('slideInLeft')){
                jQuery('.teenvoice_smalllogo img').addClass('slideInLeft');
                jQuery('.teenvoice_smalllogo img').show();
            }
            if(jQuery('.teenvoice_smalllogo img').hasClass('slideOutLeft')){
                jQuery('.teenvoice_smalllogo img').removeClass('slideOutLeft');
            }
            if(jQuery('.hidden_vinfo_sidebarwrap').hasClass('slideOutLeft')){
                 jQuery('.hidden_vinfo_sidebarwrap').removeClass('slideOutLeft'); 
                 jQuery('.hidden_vinfo_sidebarwrap').hide(600);
            }
           if(!jQuery('.hidden_vinfo_sidebarwrap').hasClass('slideInLeft')){
                jQuery('.hidden_vinfo_sidebarwrap').show();
                jQuery('.hidden_vinfo_sidebarwrap').addClass('slideInLeft');
           } 
        }, function() {
            if(jQuery('#hidden_sidebar').is(':visible')){
                    jQuery('#hidden_sidebar').fadeOut(5);
            }
            if(jQuery('.teenvoice_smalllogo img').hasClass('slideInLeft')){
                jQuery('.teenvoice_smalllogo img').removeClass('slideInLeft');
            }
           if(!jQuery('.teenvoice_smalllogo img').hasClass('slideOutLeft')){
              jQuery('.teenvoice_smalllogo img').addClass('slideOutLeft');
              jQuery('.teenvoice_smalllogo img').hide(); 
           }
           if(jQuery('.hidden_vinfo_sidebarwrap').hasClass('slideInLeft')){
               jQuery('.hidden_vinfo_sidebarwrap').removeClass('slideInLeft');
               jQuery('.hidden_vinfo_sidebarwrap').hide(600);
           }
           if(!jQuery('.hidden_vinfo_sidebarwrap').hasClass('slideOutLeft')){
                jQuery('.hidden_vinfo_sidebarwrap').addClass('slideOutLeft');
           }
        });

我正在使用切换，有时它不起作用，例如当我第一次点击第一个但没有关闭它点击第二个时 one.Also 我试过点击而不是像这样切换

jQuery('.contact_icon').click(function(){
            if(jQuery('#vinfo_sidebar').is(':visible')){
                    jQuery('#vinfo_sidebar').fadeOut(5);
            }
            if(!jQuery(".hidden_innerwrap").is(':visible')){
                if(!jQuery('.teenvoice_smalllogo img').hasClass('slideInLeft')){
                    jQuery('.teenvoice_smalllogo img').addClass('slideInLeft');
                    jQuery('.teenvoice_smalllogo img').show();
                }
                if(jQuery('.teenvoice_smalllogo img').hasClass('slideOutLeft')){
                    jQuery('.teenvoice_smalllogo img').removeClass('slideOutLeft');
                }
                if(jQuery('.hidden_innerwrap').hasClass('slideOutLeft')){
                     jQuery('.hidden_innerwrap').removeClass('slideOutLeft'); 
                     jQuery('.hidden_innerwrap').hide(600); 
                }
               if(!jQuery('.hidden_innerwrap').hasClass('slideInLeft')){
                    jQuery('.hidden_innerwrap').show();
                    jQuery('.hidden_innerwrap').addClass('slideInLeft');
               }  
            }else{
                if(jQuery('.teenvoice_smalllogo img').hasClass('slideInLeft')){
                    jQuery('.teenvoice_smalllogo img').removeClass('slideInLeft');
                }
               if(!jQuery('.teenvoice_smalllogo img').hasClass('slideOutLeft')){
                  jQuery('.teenvoice_smalllogo img').addClass('slideOutLeft');
                  jQuery('.teenvoice_smalllogo img').hide(); 
               }
               if(jQuery('.hidden_innerwrap').hasClass('slideInLeft')){
                   jQuery('.hidden_innerwrap').removeClass('slideInLeft');
                   jQuery('.hidden_innerwrap').hide(600);
               }
               if(!jQuery('.hidden_innerwrap').hasClass('slideOutLeft')){
                    jQuery('.hidden_innerwrap').addClass('slideOutLeft');
                    jQuery('.hidden_innerwrap').hide(600);
               }
            }

        });

但是在点击第二个图标后，第一个图标也不起作用。如何解决这个问题？

Answer 1

这是完美运行的代码

jQuery('.contact_icon').click(function(){
            if(jQuery('#vinfo_sidebar').is(':visible')){
                    jQuery('#vinfo_sidebar').fadeOut(5);
            }
            if(!jQuery(".hidden_innerwrap").is(':visible')){
                jQuery(".hidden_innerwrap").removeClass('slideInLeft');
                if(!jQuery('.teenvoice_smalllogo img').hasClass('slideInLeft')){
                    jQuery('.teenvoice_smalllogo img').addClass('slideInLeft');
                    jQuery('.teenvoice_smalllogo img').show();
                }
                if(jQuery('.teenvoice_smalllogo img').hasClass('slideOutLeft')){
                    jQuery('.teenvoice_smalllogo img').removeClass('slideOutLeft');
                }
                if(jQuery('.hidden_innerwrap').hasClass('slideOutLeft')){
                     jQuery('.hidden_innerwrap').removeClass('slideOutLeft'); 
                     jQuery('.hidden_innerwrap').hide(600); 
                }
               if(!jQuery('.hidden_innerwrap').hasClass('slideInLeft')){
                    jQuery('.hidden_innerwrap').show();
                    jQuery('.hidden_innerwrap').addClass('slideInLeft');
               }  
            }else{
                if(jQuery('.teenvoice_smalllogo img').hasClass('slideInLeft')){
                    jQuery('.teenvoice_smalllogo img').removeClass('slideInLeft');
                }
               if(!jQuery('.teenvoice_smalllogo img').hasClass('slideOutLeft')){
                  jQuery('.teenvoice_smalllogo img').addClass('slideOutLeft');
                  jQuery('.teenvoice_smalllogo img').hide(); 
               }
               if(jQuery('.hidden_innerwrap').hasClass('slideInLeft')){
                   jQuery('.hidden_innerwrap').removeClass('slideInLeft');
                   jQuery('.hidden_innerwrap').hide(600);
               }
               if(!jQuery('.hidden_innerwrap').hasClass('slideOutLeft')){
                    jQuery('.hidden_innerwrap').addClass('slideOutLeft');
                    jQuery('.hidden_innerwrap').hide(600);
               }
            }

        });

        jQuery('.vinfo_icon').click(function(){
            if(jQuery('#hidden_sidebar').is(':visible')){
                    jQuery('#hidden_sidebar').fadeOut(5);
            }
            if(!jQuery('.hidden_vinfo_sidebarwrap').is(':visible')){
                jQuery(".hidden_vinfo_sidebarwrap").removeClass('slideInLeft');
                if(!jQuery('.teenvoice_smalllogo img').hasClass('slideInLeft')){
                    jQuery('.teenvoice_smalllogo img').addClass('slideInLeft');
                    jQuery('.teenvoice_smalllogo img').show();
                }
                if(jQuery('.teenvoice_smalllogo img').hasClass('slideOutLeft')){
                    jQuery('.teenvoice_smalllogo img').removeClass('slideOutLeft');
                }
                if(jQuery('.hidden_vinfo_sidebarwrap').hasClass('slideOutLeft')){
                     jQuery('.hidden_vinfo_sidebarwrap').removeClass('slideOutLeft'); 
                     jQuery('.hidden_vinfo_sidebarwrap').hide(600); 
                }
               if(!jQuery('.hidden_vinfo_sidebarwrap').hasClass('slideInLeft')){
                    jQuery('.hidden_vinfo_sidebarwrap').show();
                    jQuery('.hidden_vinfo_sidebarwrap').addClass('slideInLeft');
               } 
            }else{
                  if(jQuery('.teenvoice_smalllogo img').hasClass('slideInLeft')){
                        jQuery('.teenvoice_smalllogo img').removeClass('slideInLeft');
                    }
                   if(!jQuery('.teenvoice_smalllogo img').hasClass('slideOutLeft')){
                      jQuery('.teenvoice_smalllogo img').addClass('slideOutLeft');
                      jQuery('.teenvoice_smalllogo img').hide(); 
                   }
                   if(jQuery('.hidden_vinfo_sidebarwrap').hasClass('slideInLeft')){
                        jQuery('.hidden_vinfo_sidebarwrap').removeClass('slideInLeft');
                        jQuery('.hidden_vinfo_sidebarwrap').hide(600);
                    }
                    if(!jQuery('.hidden_vinfo_sidebarwrap').hasClass('slideOutLeft')){
                         jQuery('.hidden_vinfo_sidebarwrap').addClass('slideOutLeft');
                         jQuery('.hidden_vinfo_sidebarwrap').hide(600);
                    }
            }
        });

使用 jquery 打开第二个侧边栏时如何关闭一个侧边栏？

How to close one sidebar when opening the second one with jquery?

jquery

click