jQuery的切换功能

Question

$(document).ready(function() { 
      $(".LeftColumn").hide(); 
      $(".SidebarToggle").toggle(function() { 
       $(this).addClass("active"); 
       $(this).text("Hide Sidebar"); 
       $(this).attr("title", "Hide Sidebar"); 
       $(".LeftColumn").fadeIn("fast"); 
       return false; 
      }, 
      function() { 
       $(this).removeClass("active"); 
       $(this).text("Show Sidebar"); 
       $(this).attr("title", "Show Sidebar"); 
       $(".LeftColumn").fadeOut("fast"); 
       return false; 
      }); 

      $(document).mouseup(function() { 
       $('.LeftColumn').fadeOut('fast'); 
       $('.SidebarToggle').removeClass("active"); 
       $('.SidebarToggle').text("Show Sidebar"); 
      }) 
     }); 

，当用户点击它会隐藏LeftColumn，因为我想在页面上的其他地方我的问题是，但切换功能不知道会这样，当用户点击SidebarToggle不会将其链接显示LeftColumn，因为它将其视为隐藏。我怎样才能解决这个问题？

由于

Answer 1

在这种情况下，代替的.toggle()，使用.click()并通过检查该active类.hasClass()检测状态的内部，这样的：

$(function() { 
    $(".LeftColumn").hide().click(function(e) { e.stopPropagation(); }); 
    $(".SidebarToggle").click(function() { 
    if($(this).hasClass("active")) { 
     $(this).removeClass("active") 
      .text("Show Sidebar") 
      .attr("title", "Show Sidebar"); 
     $(".LeftColumn").fadeOut("fast");  
    } else { 
     $(this).addClass("active") 
      .text("Hide Sidebar") 
      .attr("title", "Hide Sidebar"); 
     $(".LeftColumn").fadeIn("fast"); 
    } 
    return false; 
    }); 
    $(document).click(function() { 
     $('.LeftColumn').fadeOut('fast'); 
     $('.SidebarToggle').removeClass("active") 
         .text("Show Sidebar"); 
    }); 
}); 

You can try a demo here

这样，您不必担心的状态个功能，你检查你点击:)

Answer 2

$(document).ready(function() { 
    var leftColumn = $('.LeftColumn'); 
    leftColumn.hide(); 
    var sidebarToggle = $('.SidebarToggle') 
    var hideSidebar = function() { 
     sidebarToggle.removeClass('active'); 
     sidebarToggle.text('Show Sidebar'); 
     sidebarToggle.attr('title', 'Show Sidebar'); 
     leftColumn.fadeOut('fast'); 
    }; 
    var showSidebar = function() { 
     sidebarToggle.addClass('active'); 
     sidebarToggle.text('Hide Sidebar'); 
     sidebarToggle.attr('title', 'Hide Sidebar'); 
     leftColumn.fadeIn('fast'); 
    }; 
    sidebarToggle.click(function() { 
     if (sidebarToggle.hasClass('active')) { 
      hideSidebar(); 
     } 
     else { 
      showSidebar(); 
     } 
     return false; 
    }); 
    $(document).click(function() { 
     if (sidebarToggle.hasClass('active')) { 
      hideSidebar(); 
     } 
    }); 
}); 

Answer 3

这给了一枪

$(document).mouseup(function (e) { 
    if (! $(e.target).is('.SidebarToggle')) { 
     $('.LeftColumn').fadeOut('fast'); 
     $('.SidebarToggle').removeClass("active"); 
     $('.SidebarToggle').text("Show Sidebar"); 
    } 
})