点击显示/隐藏点击jQuery

问题描述

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

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

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

当我点击 #myelement时，我怎么能这样做？ code>再一次（当元素已经显示时）它将

提供.toggle（）方法是为了方便起见。手动实现相同的行为直接相对
，如果.toggle（）中内置的假设证明是有限的，那么这可能是
。
例如，如果将
两次应用于同一元素，则无法保证.toggle（）无法正常工作。由于.toggle（）在内部使用单击
处理程序来完成其工作，我们必须解除绑定以删除附加.toggle（）的行为
，以便其他点击处理程序可以在$ b $中捕获b交火。该实现还在
事件上调用.preventDefault（），因此如果在元素上调用了.toggle（），则不会遵循链接并且不会单击按钮
，

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

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

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 UI to use addition effects with show / hide like direction.

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）语句。正如TJCrowder所建议的那样。

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

Live Demo

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

这篇关于点击显示/隐藏点击jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！