上点击使用jQuery切换显示/隐藏上点击使用jQuery切换显示/隐藏(Toggle show/h

我有一个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功能。 那可能吗？

Answer 1:

拨动事件被弃用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和切换与点击隐藏。 你可以把条件上的知名度，如果元素是可见然后隐藏其他表现出来。 请注意，您将需要jQuery UI的使用添加效果与显示/隐藏像方向 。

现场演示

$( "#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);
});

Answer 2:

请使用jQuery切换功能的它为你做任务

.toggle（） -显示或隐藏匹配元素。

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

Answer 3:

您可以使用此代码切换你的元素变种ELE =的jQuery（“yourelementid”）; ele.slideToggle（ '慢'）; 这会为你工作:)

Answer 4:

这会为ü工作

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

Answer 5:

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

Answer 6:

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

现场演示

文章来源: Toggle show/hide on click with jQuery