Question

我在我的jsp页面中使用show()和hide()，它工作正常，但是我很难找到一种方法来隐藏我的表一旦显示。 HTML EX：

<button id="b1">show 1</button>
<button id="b2">show 2</button>
<div class="hidden" id="d1">
<div class="hidden" id="d2">

所以基本上我想在点击div1时显示button1，并在点击div2时显示button2。我正在使用hide() / show()，因为我不希望两者同时展示。所以这是我的剧本：

  $('#b1').click(function(){
    $('#d1').show();
    $('#d2').hide();
  });

  $('#b2').click(function(){
    $('#d2').show();
    $('#d1').hide();
  });

所以这个工作正常，只要一次只显示一个，但我想添加一些脚本，以便在显示div2时使其显示，我可以点击button2和让div2隐藏，div1也是如此。我知道这很令人困惑所以，如果您有任何疑问，请询问。感谢。

Answer 1

我想你想要这个：

$('#b1').click(function(){
    $('#d1').toggle();
});

$('#b2').click(function(){
    $('#d2').toggle();
});

如果你仍然需要这样做只有一个可以显示，那么可能是这样的：

$('#b1').click(function(){
    if($('#d1').toggle().is(":visible")){
       $('#d2').hide();
    }
});

$('#b2').click(function(){
    if($('#d2').toggle().is(":visible")){
       $('#d1').hide();
    }
});

Answer 2

我认为你需要这个

$('#b1').click(function(){
    $('#d2').hide();
     $('#d1').toggle();
});

$('#b2').click(function(){
     $('#d1').hide();
     $('#d2').toggle();

});

Answer 3

您无需检查任何内容，只需切换第一个并始终隐藏另一个

$('#b1').click(function(){
    $('#d1').toggle();
    $('#d2').hide();
});

$('#b2').click(function(){
    $('#d2').toggle();
    $('#d1').hide();
});

Answer 4

您可以使用toggle()方法代替show / hide来为您执行此操作。

没有参数，.toggle（）方法只是切换可见性元素：

来源：http://api.jquery.com/toggle/

Answer 5

  $('#b1').click(function(){
    $('#d1').toggle();
  });

  $('#b2').click(function(){
    $('#d2').toggle();
  });

Answer 6

如果你不使用任何动画，在css中定义一个类可能更有用，例如.hidden {display：“none”}并切换它。

因此，您的代码可以是这样的：

$("#b1, #b2").click(function() { $("#d1, d2").toggleClass("hidden") })

试试这个，如果你愿意，并告诉我们，它是否有效）

Answer 7

您可以检查此$('#someDiv:visible')是否可见某些内容，然后进行适当的处理。

使用jQuery show（）/ hide（）

7 个答案: