單擊時向下滑動和向上滑動 div

Question

我正在使用以下代碼使用 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>

任何幫助表示贊賞。

理想情況下，我想要一個向下滑動按鈕上的向下箭頭，一個向上箭頭來替換它以在同一個按鈕上向上滑動。 並完全取消密切聯系。

任何幫助表示贊賞。 干杯

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/

Answer 4

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();
});