Javascript 单击时向下滑动和向上滑动 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5279733/
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
Slide down and slide up div on click
提问by 422
I am using the following code to open and close a div ( slide up/down ) using js
我正在使用以下代码使用 js 打开和关闭 div（向上/向下滑动）
I have the slide down event attached to a button and the slide up event sttached to close text.
我将向下滑动事件附加到按钮上，将向上滑动事件附加到关闭文本。
What I want is the button onclick to open and onclick again close the slide element.
我想要的是 onclick 按钮打开和 onclick 再次关闭幻灯片元素。
Here is the JS
这是JS
// slide down effect
$(function(){
$('.grabPromo').click(function(){
var parent = $(this).parents('.promo');
$(parent).find('.slideDown').slideDown();
});
$('.closeSlide').click(function(){
var parent = $(this).parents('.promo');
$(parent).find('.slideDown').slideUp();
});
});
The HTML:
HTML：
<span class="grabPromo">Open</span>
and in the slide down area i have
在下滑区域我有
<a class="closeSlide">Close</a>
Any help appreciated.
任何帮助表示赞赏。
Ideally I want a down pointing arrow on the slide down button and a up pointing arrow to replace it to slide up on same button. And do away with the close link altogether.
理想情况下，我想要一个向下滑动按钮上的向下箭头和一个向上箭头来替换它以在同一按钮上向上滑动。并完全取消密切联系。
Any help appreciated. Cheers
任何帮助表示赞赏。干杯
回答by mVChr
You can just use slideToggle()in the click function:
您可以slideToggle()在点击功能中使用：
$('.grabPromo').click(function(e){
$('.slideDown').slideToggle();
});
回答by FatherStorm
try this. it allows multiple items so isn't ID specific. and supports any content loaded via AJAX as well. jsfiddle is here
尝试这个。它允许多个项目，因此不是特定于 ID 的。并支持通过 AJAX 加载的任何内容。 jsfiddle 在这里
<div class='toggle_parent'>
<div class='toggleHolder'>
<span class='toggler'>Open</span>
<span class-'toggler' style='display:none;'>Close</span>
</div>
<div class='toggled_content' style='display:none;'>
My Content
</div>
</div>
and
和
$('.toggler').live('click',function(){
$(this).parent().children().toggle(); //swaps the display:none between the two spans
$(this).parent().parent().find('.toggled_content').slideToggle(); //swap the display of the main content with slide action
});
回答by amosrivera
<div id="content">
bla bla bla bla bla bla bla bla blabla bla blabla bla bla
</div>
<input type="button" id="myButton" value="Slide down ↓"/>
$("#myButton").toggle(function(){
$("#content").slideDown();
$(this).val("Slide up ↑");
},function(){
$("#content").slideUp();
$(this).val("Slide down ↓")
});
Online demo: http://jsfiddle.net/amosrivera/AYWku/
在线演示：http: //jsfiddle.net/amosrivera/AYWku/
Demo withspan: http://jsfiddle.net/amosrivera/AYWku/1/
