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

Stack Overflow用户

提问于 2015-08-05 06:12:20

回答 1查看 49关注 0票数 0

我有两个侧边栏点击下面的代码

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);
               }
            }

        });

但是，在点击第二个图标之后，第一个图标也没有工作。怎么才能解决这个问题呢？

jquery

click

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-08-05 06:27:52

下面是代码，其工作原理非常完美。

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);
                    }
            }
        });

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31824652

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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