点击显示/隐藏点击jQuery

Question

我有一个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

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 docs

您可以使用show和使用click进行隐藏来切换可见性.如果元素可见则可以将条件置于可见性上,然后隐藏其他显示它.请注意,您需要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');
  });