jQuery实现点击切换显示/隐藏

Question

jQuery实现点击切换显示/隐藏

49

我有一个 div 元素，当我点击它时，另一个默认情况下隐藏的 div 滑动并显示出来。这是动画本身的代码：

$('#myelement').click(function(){
     $('#another-element').show("slide", { direction: "right" }, 1000);
});

当我点击#myelement（当元素已经显示时）时，如何使其隐藏#another-element，就像这样：

$('#another-element').hide("slide", { direction: "right" }, 1000);?

基本上，它应该像slideToggle一样工作，但使用show/hide函数。这可能吗？

- Cyclone

7个回答

30

利用 jQuery 的 toggle() 函数，它可以为您完成任务。

.toggle() - 显示或隐藏匹配的元素。

$('#myelement').click(function(){
      $('#another-element').toggle('slow');
  });

- Pranay Rana

1

当您使用切换功能时，它会隐藏内容，但值仍然存在并可以在页面发布后查看。 - vishB

4

这将适用于您的情况。

   $("#button-name").click(function(){
        $('#toggle-id').slideToggle('slow');
    });

- CSS Guy

0

你可以使用 .toggle() 函数代替 .click() 函数...

- lakshmi priya

0

您可以使用以下代码来切换元素的显示状态： var ele = jQuery("yourelementid"); ele.slideToggle('slow'); 这将对您有所帮助 :)

- Abubakar Shams

1

不是的，因为我想把它向左滑动。而 slideToggle 是在垂直方向上切换元素。 - Cyclone

0

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js</script>        <script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>
<p>Welcome !!!</p>
<button>Toggle between hide() and show()</button>
</body>
</html>

- vijayabalan

-3

$(document).ready( function(){
  $("button").click(function(){
    $("p").toggle(1000,'linear');
  });
});

实时演示

- Chaitanya Voleti

这基本上是与被接受的答案中给出的代码相同 + 链接的代码示例与答案中的不同。 - BDL

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adil · Accepted Answer

toggle-event在1.8版本中已被弃用，并且在1.9版本中已被移除

~~尝试使用以下方法...~~

$('#myelement').toggle(
   function () {
      $('#another-element').show("slide", {
          direction: "right"
      }, 1000);
   },
   function () {
      $('#another-element').hide("slide", {
          direction: "right"
      }, 1000);
});

注意：该方法签名在jQuery 1.8中已被弃用，在jQuery 1.9中已被移除。jQuery还提供了一个名为.toggle()的动画方法来切换元素的可见性。触发动画或事件方法取决于传递的参数集合，jQuery文档。

.toggle()方法是为方便而提供的。手动实现相同行为相对直接，并且如果内置在.toggle()中的假设证明有限，则这可能是必要的。例如，如果两次应用于同一元素，则不能保证 .toggle() 的正确工作。由于 .toggle() 在内部使用单击处理程序来执行其工作，因此我们必须取消绑定单击以删除使用 .toggle() 附加的行为，以便可以捕获其他单击处理程序。实现还在事件上调用.preventdefault()，因此如果在元素上调用了 .toggle()，则链接将不会被跟踪，按钮将不会被点击，jQuery文档

您可以使用点击事件通过show和hide方法在元素之间切换可见性。您可以根据可见性设置条件，如果元素可见，则隐藏，否则显示。 请注意，您需要jQuery UI才能使用show/hide的其他特效，例如direction。

演示

$( "#myelement" ).click(function() {     
    if($('#another-element:visible').length)
        $('#another-element').hide("slide", { direction: "right" }, 1000);
    else
        $('#another-element').show("slide", { direction: "right" }, 1000);        
});

或者，直接使用 toggle 而不是 click。通过使用 toggle，您无需条件（if-else）语句。正如 T.J.Crowder 所建议的。

Live Demo

$( "#myelement" ).click(function() {     
   $('#another-element').toggle("slide", { direction: "right" }, 1000);
});