使用 jQuery 在单击时切换显示/隐藏

IT技术 javascript toggle jquery
2021-01-25 09:24:37

我得到了一个div元素,所以当我点击它时,另一个div默认隐藏元素正在滑动和显示,这是动画本身的代码:

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

我怎么能作出这样的,所以当我在点击#myelement一次(当元素已经表明),它会隐藏#another-element是这样的:

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

所以基本上,它应该slideToggleshow/hide功能完全一样那可能吗?

6个回答

切换事件在 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 文档

您可以在使用显示的可见性和单击隐藏之间切换。如果元素可见,您可以设置可见性条件,然后隐藏否则显示它。请注意,您将需要jQuery UI才能将附加效果与 show/hide like direction 一起使用

现场演示

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

或者,只需使用切换而不是单击。通过使用切换,您将不需要条件 (if-else) 语句。正如 TJCrowder 所建议的那样。

现场演示

$( "#myelement" ).click(function() {     
   $('#another-element').toggle("slide", { direction: "right" }, 1000);
});
感谢@TJCrowder 的指点。我已经修改了我的答案,请看一下。
2021-03-16 09:24:37
顺便说一句,现在不推荐使用 Toggle()。
2021-03-23 09:24:37
+1,但我不会反复查找。var elm = $("#another-element"); if (elm.is(":visible")) { /* Do one thing */ } else { /* Do the other */ }(您的具体示例实际上是单击内部的单行:$('#another-element').toggle("slide", { direction: "right" }, 1000);但目标是显示做不同的事情 [两个功能]...)
2021-03-27 09:24:37

利用 jquery 切换功能为您完成任务

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

$('#myelement').click(function(){
      $('#another-element').toggle('slow');
  });
当您使用切换时,它会隐藏内容,但值仍然存在并且可以在页面帖子中看到
2021-04-08 09:24:37

这对你有用

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

您可以使用此代码来切换元素 var ele = jQuery("yourelementid"); ele.slideToggle('慢'); 这对你有用:)

不是真的,因为我想把它滑到左边。并且slideToggle正在垂直切换元素。
2021-04-10 09:24:37

您可以使用.toggle()function 而不是.click()....