[英]Slide down and slide up div on click
我正在使用以下代码使用 js 打开和关闭 div(向上/向下滑动)
我将向下滑动事件附加到按钮上,将向上滑动事件附加到关闭文本。
我想要的是 onclick 按钮打开和 onclick 再次关闭幻灯片元素。
这是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();
});
});
HTML:
<span class="grabPromo">Open</span>
在下滑区域我有
<a class="closeSlide">Close</a>
任何帮助表示赞赏。
理想情况下,我想要一个向下滑动按钮上的向下箭头,一个向上箭头来替换它以在同一个按钮上向上滑动。 并完全取消密切联系。
任何帮助表示赞赏。 干杯
您可以在点击函数中使用slideToggle()
:
$('.grabPromo').click(function(e){
$('.slideDown').slideToggle();
});
尝试这个。 它允许多个项目,因此不是特定于 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>
和
$('.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
});
<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 ↓")
});
在线演示: http : //jsfiddle.net/amosrivera/AYWku/
带span
演示: http : //jsfiddle.net/amosrivera/AYWku/1/
HTML:
<div class='parent_row'>
<span class='toggler_row'>click here</span>
<div class='child_row' style='display:none;'>
Row 1
</div>
<div class='child_row' style='display:none;'>
Row 2
</div>
<div class='child_row' style='display:none;'>
Row 3
</div>
</div>
JS/Jquery :
$('.toggler_row').live('click',function(){
$(this).parent().parent().find('.child_row').slideToggle();
});
jQuery .live()已从 1.9 版开始删除,如果它坏了,请尝试下面的脚本,它会起作用。
$('body').on('click', '.toggler_row',function(){
$(this).parent().parent().find('.child_row').slideToggle();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.