jquery close toggle

Question

我有多个按钮切换相同的div（实际上是我页面上的iframe）。当我点击不同的按钮时，我希望它们“retoggle”，但当我再次点击相同的按钮时，我只想关闭div。

JSFIDDLE

$(document).ready(function(){
    $('.leftbutton').click(function(){
        if($('#left').is(':visible')) return ; // ignoring
        $('#right').hide();
        $('#left').fadeIn();
    });
});

$(document).ready(function(){
    $('.rightbutton').click(function(){
        if($('#right').is(':visible')){
            $('#right').fadeOut();
            $('#right').fadeIn();
        } 
        else{
            $('#left').hide();
            $('#right').fadeIn();
        }
    });
});

Answer 1

您可以执行的操作是存储作为目标元素一部分单击的最后一个按钮。例如：

$(".rightbutton").on('click', function () {
   $("#right").data('lastClicked', this);

然后，将最后点击的数据与this进行比较，看看是否应该显示该按钮。

http://jsfiddle.net/CfGYG/10/

Answer 2

要在再次单击时关闭左侧，您只需隐藏它而不是返回功能。同样的概念可以应用于正确的按钮：

$('.leftbutton').click(function(){
    if($('#left').is(':visible'))
    {
        $("#left").hide("slide");;
        return;
    }
    $('#right').hide();
    $('#left').fadeIn();
});

http://jsfiddle.net/CfGYG/11/

Answer 3

这两个答案都很有用，并且结合起来给了我所需的所有功能。

查看这个jsfiddle：http://jsfiddle.net/thomascs/nV5Tu/

$(document).ready(function(){
    $('.leftbutton').click(function(){
        if($('#left').is(':visible')) {
            $('#left').hide();
        }
        else {
        $('#right').hide();
        $('#left').fadeIn();
        }
    });
});

$(document).ready(function(){
    $('.rightbutton').click(function() {
        if ($('#right').is(':visible')) {
              $('#right').fadeOut();
            if ($("#right").data('lastClicked') !== this) {
               $('#right').fadeIn();
            }
        } 
        else {
            $('#left').hide();
            $('#right').fadeIn();
        }
        $("#right").data('lastClicked', this);
    });
});

感谢您的帮助！