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