jQuery Basculer

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

Le problème que j'ai est lorsque l'utilisateur clique ailleurs sur la page, il cachera la LeftColumn que je veux, mais la fonction de bascule ne sait pas si lorsque l'utilisateur clique sur le lien SidebarToggle il ne sera pas montre le LeftColumn comme il le traite comme cacher. Comment puis-je réparer cela?

Merci

Answer 1

Dans ce cas, au lieu de .toggle(), utilisez .click() et détecter l'état intérieur en vérifiant cette classe active avec .hasClass(), comme ceci:

$(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

De cette façon, vous n'avez pas besoin de vous soucier de l'état de la fonctions, vous vérifiez que vous cliquez sur :)

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

donner un coup de feu ce

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