如何使用jQuery从左到右切换包含关闭按钮？

Question

如何使用jQuery UI切换功能添加关闭按钮？

$(".login").click(function () {

    $(this).hide();

    $("#myDiv").toggle("slide", {
        direction: "left"
    }, 500);

});

我的jsFiddle

Answer 1

小提琴： http ： //jsfiddle.net/AtheistP3ace/TX55G/207/

$(".login, .close").click(function () {

    $('.login').toggle();

    $("#myDiv").toggle("slide", {
        direction: "left"
    }, 500);

});

切换后显示/隐藏单击按钮： http : //jsfiddle.net/AtheistP3ace/TX55G/208/

$(".login, .close").click(function () {

    $("#myDiv").toggle("slide", {
        direction: "left"
    }, 500, function () { $('.login').toggle(); });

});

如果要在显示关闭之前隐藏单击并在隐藏关闭之后显示单击，可以执行此操作。 尽管我会指出使用可见/隐藏选择器可能会降低性能，但是我试图对您的代码不做太多更改。 您可以轻松地做到这一点。

http://jsfiddle.net/AtheistP3ace/TX55G/209/

$(".login, .close").click(function () {

    var hiding = $('.login:visible');
    if (hiding.length == 1) {
        $('.login:visible').toggle();
    }

    $("#myDiv").toggle("slide", {
        direction: "left"
    }, 500, function () {
        if (hiding.length == 0) {
            $('.login').toggle();
        }
    });

});

这就是我这样做的方式，而不是使用那些特殊的选择器。 我会上课。 http://jsfiddle.net/AtheistP3ace/TX55G/211/

CSS：

.hide {
    display: none;
}

JS：

$(".login, .close").click(function () {

    var login = $('.login');
    var hiding = !login.hasClass('hide');
    if (hiding) {
        $('.login').addClass('hide');
    }

    $("#myDiv").toggle("slide", {
        direction: "left"
    }, 500, function () {
        if (!hiding) {
            $('.login').removeClass('hide');
        }
    });

});

Answer 2

$(".login, .close").click(function () {

演示