向下滑动并向上滑动div

Question

我使用以下代码使用js打开和关闭div(向上/向下滑动)

我将滑动事件附加到按钮上,并且向上滑动事件以关闭文本.

我想要的是按钮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>

任何帮助赞赏.

理想情况下,我想在向下滑动按钮上使用向下箭头,向上指向箭头以替换它以在同一按钮上向上滑动.并完全取消关闭链接.

任何帮助赞赏.干杯

Answer 1

你可以slideToggle()在点击功能中使用:

$('.grabPromo').click(function(e){
    $('.slideDown').slideToggle();
});

这是一个演示.

Answer 2

试试这个.它允许多个项目,因此不是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

});

Answer 3

<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/