jquery - jquery关闭切换

Question

我有多个按钮切换同一个 div（实际上是我页面上的 iframe）。当我单击不同的按钮时，我希望它们“重新切换”，但是当我再次单击相同的按钮时，我只想关闭 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);
    });
});

谢谢你的帮助！