单击时向下滑动和向上滑动 div答案

【问题标题】：Slide down and slide up div on click单击时向下滑动和向上滑动 div
【发布时间】：2011-07-13 21:04:06
【问题描述】：

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

任何帮助表示赞赏。

理想情况下，我希望在向下滑动按钮上有一个向下箭头，并在同一个按钮上用一个向上箭头替换它以向上滑动。并完全取消关闭链接。

任何帮助表示赞赏。干杯

【问题讨论】：

标签： javascript jquery

【解决方案1】：

你可以在点击函数中使用slideToggle()：

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

Here's a demo.

【讨论】：

【解决方案2】：

试试这个。它允许多个项目，因此不是特定于 ID 的。并支持任何通过 AJAX 加载的内容。 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

});

【讨论】：

【解决方案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/

【讨论】：

这很好，但我不想使用输入按钮。我们正在使用抓住这个交易
@amosrivera，哈哈不错的箭头符号。
@422，不管click元素是什么，他给了你功能，你可以根据需要将输入更改为span，它只需要具有相同的id.. ..
@Nick 呵呵，谢谢，我喜欢那些，它们既简单又有效。 @422 正如 nick 所说，该功能不依赖于元素类型，但我在跨度中添加了一个链接宽度，因此您可以看到差别不大。
这很酷，但我们在页面上还有其他滑块。那么将这种效果添加到其他 div 按钮的经济（代码）方式是什么，因为您使用的是 ID，我不希望所有按钮同时打开大声笑。

【解决方案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();
});

【讨论】：