点击显示/隐藏点击jQuery

Question

我有一个div元素，所以当我点击它时，默认隐藏的另一个div正在滑动显示，这里是动画本身的代码：

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

当我再次点击#myelement时（如果已经显示元素），我将如何做到这一点，它将隐藏 #another-element，如下所示：< / p>

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

基本上，它应该与slideToggle完全相同，但具有show/hide函数。这可能吗？

Answer 1

在版本1.8中不推荐使用toggle-event，在版本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 docs。

     

提供.toggle（）方法是为了方便起见。这是相对的   直接用手实现相同的行为，这可以   如果.toggle（）中内置的假设证明是有限的，则是必要的。   例如，如果应用了.toggle（），则无法保证正常工作   两次到同一个元素。由于.toggle（）内部使用了一个点击   处理程序要做它的工作，我们必须解除绑定点击删除行为   附带.toggle（），因此可以捕获其他点击处理程序   交火。该实现还调用.preventDefault（）   事件，因此不会遵循链接，也不会点击按钮   如果已在元素jQuery docs

上调用.toggle（）

您可以使用show进行切换，使用click进行隐藏。如果元素可见则可以将条件置于可见性上，然后隐藏其他显示它。 请注意，您需要jQuery UI才能使用添加效果以及显示/隐藏方向。

<强> Live Demo

$( "#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）语句。正如T.J.Crowder所建议的那样。

<强> Live Demo

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

Answer 2

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

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

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

Answer 3

您可以使用.toggle()功能代替.click() ....

Answer 4

您可以使用此代码切换元素 var ele = jQuery（“yourelementid”）; ele.slideToggle（ '慢'）; 这对你有用：）

Answer 5

这适用于你

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

Answer 6

yarn add package-name --force

Answer 7

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

Live Demo