单击时向下滑动并向上滑动div

问题描述

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

I am using the following code to open and close a div ( slide up/down ) using js

我在按钮上附加了向下滑动事件，并附加了向上滑动事件以关闭文本.

I have the slide down event attached to a button and the slide up event sttached to close text.

我想要的是onclick按钮打开，然后再次onclick关闭幻灯片元素.

What I want is the button onclick to open and onclick again close the slide element.

这是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>

任何帮助表示赞赏.

理想情况下，我希望向下滑动按钮上的向下箭头和向上箭头替代它以在同一按钮上向上滑动.并完全取消紧密链接.

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

推荐答案

尝试一下.它允许多个项目，因此不是特定于ID的.并支持通过AJAX加载的所有内容. jsfiddle在这里

try this. it allows multiple items so isn't ID specific. and supports any content loaded via AJAX as well. jsfiddle is here

<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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！