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

Toggle show/hide on click with jQuery

提问by Cyclone

I got a divelement, so when I click on it, another divwhich is hidden by default is sliding and showing, here is the code for the animation itself:

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

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

How can I make that so when I click on the #myelementone more time (when the element is showed already) it will hidethe #another-elementlike this:

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

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

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

So basicly, it should work exactly like a slideTogglebut with the show/hidefunctions. Is that possible?

所以基本上，它应该slideToggle与show/hide功能完全一样。那可能吗？

回答by Adil

The toggle-event is deprecated in version 1.8, and removed in version 1.9

切换事件在 1.8 版中已弃用，并在 1.9 版中删除

Try this...

尝试这个...

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

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

Note:This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed, jQuery docs.

The .toggle() method is provided for convenience. It is relatively straightforward to implement the same behavior by hand, and this can be necessary if the assumptions built into .toggle() prove limiting. For example, .toggle() is not guaranteed to work correctly if applied twice to the same element. Since .toggle() internally uses a click handler to do its work, we must unbind click to remove a behavior attached with .toggle(), so other click handlers can be caught in the crossfire. The implementation also calls .preventDefault() on the event, so links will not be followed and buttons will not be clicked if .toggle() has been called on the element, jQuery docs

注意：此方法签名在 jQuery 1.8 中已弃用，并在 jQuery 1.9 中删除。jQuery 还提供了一个名为 .toggle() 的动画方法，用于切换元素的可见性。是否触发动画或事件方法取决于传递的参数集，jQuery 文档。

提供 .toggle() 方法是为了方便。手动实现相同的行为相对简单，如果 .toggle() 中内置的假设证明是有限的，那么这可能是必要的。例如，如果将 .toggle() 应用于同一元素两次，则不能保证其正常工作。由于 .toggle() 在内部使用点击处理程序来完成它的工作，我们必须解除点击绑定以移除与 .toggle() 相关的行为，因此其他点击处理程序可能会陷入交火中。该实现还会在事件上调用 .preventDefault()，因此如果在元素上调用了 .toggle()，则不会跟踪链接并且不会单击按钮，jQuery 文档

You toggle between visibility using show and hide with click. You can put condition on visibility if element is visible then hide else show it. Note you will need jQuery UIto use addition effects with show / hide like direction.

您可以在使用显示的可见性和单击隐藏之间切换。如果元素可见，您可以设置可见性条件，然后隐藏否则显示它。请注意，您将需要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);        
});

Or, simply use toggle instead of click. By using toggle you wont need a condition (if-else) statement. as suggested by T.J.Crowder.

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

Live Demo

现场演示

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

回答by Pranay Rana

Make use of jquery toggle function which do the task for you

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

.toggle()- Display or hide the matched elements.

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

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

回答by CSS Guy

this will work for u

这对你有用

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

回答by lakshmi priya

You can use .toggle()function instead of .click()....

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

回答by Abubakar Shams

You can use this code for toggle your element var ele = jQuery("yourelementid"); ele.slideToggle('slow');this will work for you :)

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

回答by Chaitanya Voleti

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

Live Demo

现场演示