文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >使用jquery打开第二个边栏时，如何关闭一个边栏？

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

Stack Overflow用户
提问于 2015-08-05 06:12:20
回答 1查看 49关注 0票数 0

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

代码语言：javascript
复制
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时，我尝试用单击不切换如下所示

代码语言：javascript
复制
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
EN

回答 1

Stack Overflow用户

回答已采纳

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

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

代码语言：javascript
复制
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
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/31824652

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档