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

我得到了一个

div

元素，因此当我单击它时，另一个默认隐藏的

div

正在滑动并显示，下面是动画本身的代码：

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

当我再次点击

#myelement

时（当元素已经显示时），它将隐藏

#另一个元素，如下所示：

$（“#另一个元素”）.hide（“幻灯片”{direction:“right”}，1000）

因此，基本上，它应该像一个
slideToggle
一样工作，但具有
show/hide
功能。这可能吗？
切换事件在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（），用于切换元素的可见性。是否
触发动画或事件方法取决于参数集
通过

提供.toggle（）方法是为了方便。相对来说
直接手动实现相同的行为，这可以
如果.toggle（）中内置的假设被证明是有限的，则必须这样做。
例如，如果应用，.toggle（）不能保证正常工作
对同一元素执行两次。因为.toggle（）在内部使用单击
处理程序要执行其工作，必须取消绑定单击以删除行为
附加了.toggle（），因此可以在
交叉火力。该实现还调用
事件，因此不会跟随链接，也不会单击按钮
如果已对元素调用.toggle（）

您可以使用“显示”在可见性和单击“隐藏”在可见性之间切换。若元素可见，则可以将条件设置为可见性，然后隐藏或显示它注意，您需要使用添加效果和类似显示/隐藏的方向


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

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

或者，只需使用切换而不是单击。通过使用toggle，您不需要条件（if-else）语句。正如T.J.Crowder所建议的那样


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

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

使用jquery切换函数为您完成任务

-显示或隐藏匹配的元素

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

您可以使用
.toggle（）
函数代替
。单击（）
…
您可以使用此代码切换元素
var ele=jQuery（“yourlelementid”）；
元素滑动切换（“慢”）
这对你有用：）
这对你有用

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


没有，因为我想把它滑到左边。而
slideToggle
则垂直切换元素。当使用“切换”时，它会隐藏内容，但值仍然存在，并且可以在PostThank@T.J.Crowder页面上看到，以供指向。我修改了我的答案，请看一看。+1，但我不会重复查找<代码>var elm=$（“#另一个元素”）；如果（elm.is（“：visible”）{/*做一件事*/}或者{/*做另一件事*/}
（您的具体示例实际上是单击中的一行：
$（“#另一个元素”）.toggle（“slide”，{direction:“right”}，1000）
，但目标是显示做不同的事情[两个函数]…）btw toggle（）现在已弃用。这与接受答案中给出的代码基本相同+链接代码示例与答案中给出的代码不同。