jQuery jquery切换slideUp/slideDown
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3300745/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery toggle slideUp/slideDown
提问by Matthew
I've got a div#items and if it's clicked then div#choices slideDown(). If it's clicked again then div#choices should slideUp(); How can I test if choices is down or up already? I know I could store in a variable and toggle it's value whenever div#items is clicked, but what if #choices has been slid down by other means?
我有一个 div#items，如果它被点击，那么 div#choices slideDown()。如果再次点击它，那么 div#choices 应该是 slideUp(); 我如何测试选择是向下还是向上？我知道我可以存储在一个变量中，并在单击 div#items 时切换它的值，但是如果 #choices 已通过其他方式滑下怎么办？
回答by Marimuthu Madasamy
Use .slideToggle()
使用 .slideToggle()
回答by Andy E
As Marimuthu's answerpoints out, you can use slideToggle()to slide up if the div is already open, or down if it's closed.
正如Marimuthu 的回答所指出的，如果 div 已经打开，您可以使用slideToggle()向上滑动，如果已关闭则向下滑动。
You can also check the displayproperty to find out if it's currently visible or not. From the jQuery docs for slideUp().
您还可以检查该display属性以了解它当前是否可见。来自slideUp()的 jQuery 文档。
Once the height reaches 0, the display style property is set to none to ensure that the element no longer affects the layout of the page.
一旦高度达到0，显示样式属性设置为none，以确保该元素不再影响页面的布局。
Knowing this, you can check to see if it is set to "none":
知道了这一点，您可以检查它是否设置为“none”：
var $choices = $('div#choices');
if ($choices.css("display") == "none")
$choices.slideDown();
else
$choices.slideUp();
回答by Rohit Suthar
Try this -
尝试这个 -
HTML:
HTML：
<a href="#demo" class="nav-toggle">Show</a>
<div id="demo" style="display:none;">
<p>short info</p>
</div>
JQUERY SCRIPT:
查询脚本：
$('.nav-toggle').click(function(){
var content_id = $(this).attr('href');
var toggle_switch = $(this);
$(content_id).toggle(function(){
if($(this).css('display')=='none'){
toggle_switch.html('Show');
}else{
toggle_switch.html('Hide');
}
});
});
