jQuery Toggle功能

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，但是Toggle功能不知道这一点，所以当用户点击SidebarToggle链接时，它不会显示LeftColumn，因为它会对待它隐藏起来。我该如何解决这个问题？

由于

Answer 1

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

在这种情况下，使用.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

这样，您无需担心.toggle()函数的状态，在点击时进行检查：）

Answer 3

试一试

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