Question

我已经看过一些关于这一点的文章，但我似乎无法让他们的解决方案为我工作。

我所拥有的是两个控制不同div的show（）和hide（）状态的按钮。在页面加载时，两个div都设置为.hide（），因为用户在单击之前不需要查看它们。

所以，我有两个按钮a和b当前工作正常，但是你可以同时显示（）两个div，我不想发生。当前代码类似于

$('#a-div).hide();
$('#b-div).hide();
$('#a').click(function(){
    $('#a-div).toggle(500);
});
$('#b').click(function(){
    $('#b-div).toggle(500);
});

那么如何重新编写这个，以便如果＃a-div可见（已经尝试过.is（'：visible'）方法）并点击#b，直到＃a-div再次被隐藏时才会发生任何事情相反？

Answer 1

probably you need to apply concept like this 

$('#a-div).hide();
$('#b-div).hide();
$('#a').click(function(){
if ($('#b').isVisible)[you can check via css property as well]
{
    $('#b-div).toggle(500); [or set css property visiblity:hidden]
    $('#a-div).toggle(500);
}
else {$('#a-div).toggle(500);}
});
$('#b').click(function(){
if ($('#a').isVisible)[you can check via css property as well]
{
    $('#a-div).toggle(500); [or set css property visiblity:hidden]
    $('#b-div).toggle(500);
}
else {$('#b-div).toggle(500);}
});

Answer 2

试试这个

$('#a-div').hide();
$('#b-div').hide();
$('#a').click(function(){
    $('#a-div').toggle(500);
    if($('#b-div').is(":visible"))
        $('#b-div').hide();

});
$('#b').click(function(){
    $('#b-div').toggle(500);
    if($('#a-div').is(":visible"))
        $('#a-div').hide();
});

Answer 3

我最终做的是这个

$('#a-div').hide();
$('#b-div').hide();

$('#a').click(function(){
    $('#a-div').toggle();
    $('#b-div').hide();
});
$('#b').click(function(){
    $('#b-div').toggle();
    $('#a-div').hide();
});

对任何有兴趣的人。在此之前，我使它变得比它需要的复杂得多。

Answer 4

另一种解决方案是创建一个通用函数并传递所显示和隐藏对象的参数。这样，您可以对将来的元素使用相同的方法：

function toggleDivs($show, $hide) {
    $show.toggle();
    $hide.hide();
}
$("#b").on("click", function() { toggleDivs($("#b-div"), $("#a-div")); });
$("#a").on("click", function() { toggleDivs($("#a-div"), $("#b-div")); });

唯一缺少的项目是最初隐藏div对象，但我会在对象中添加一个css类来隐藏它们。

<强> HTML

<button id="a">Show A</button>
<button id="b">Show B</button>

<div id="a-div" class="hideDiv">A</div>
<div id="b-div" class="hideDiv">B</div>

<强> CSS

.hideDiv { display:none; }

Answer 5

＆＃13;

var $aDiv = $('#a-div');
var $bDiv = $('#b-div');
var $aBtn = $('#a');
var $bBtn = $('#b');

$aDiv.hide();
$bDiv.hide();

$aBtn.click(function(){
  $aDiv.toggle(500, function(){
    if($aDiv.is(":visible"))
	  $bBtn.prop("disabled",true);
	else
	  $bBtn.prop("disabled",false);		
  });
});

$bBtn.click(function(){
  $bDiv.toggle(500, function(){
    if($bDiv.is(":visible"))
	  $aBtn.prop("disabled",true);
	else      
	  $aBtn.prop("disabled",false);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a-div">div a</div>
<div id="b-div">div b</div>

<button id="a">btn a</button>
<button id="b">btn b</button>

＆＃13;

使用jQuery在两个按钮之间切换

5 个答案: