Javascript 单击时向下滑动和向上滑动div

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

关闭

谢谢你的帮助

理想情况下，我希望在“向下滑动”按钮上有一个向下指向的箭头，用一个向上指向的箭头代替它在同一个按钮上向上滑动。并彻底消除紧密联系

谢谢你的帮助。干杯

<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 ↓")
});

布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉
$（“#myButton”）.toggle（函数（）{
$（“#内容”）.slideDown（）；
$（this）.val（“向上滑动↑");
}，函数（）{
$（“#内容”）.slideUp（）；
$（this）.val（“向下滑动↓")
});

在线演示：

---

演示使用

span

：

试试这个。它允许多个项目，因此不是特定于ID的。它还支持通过AJAX加载的任何内容

您只需在单击功能中使用：

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

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>

jQuery.live（）在1.9版以后的版本中已被删除，如果它正在崩溃，请尝试下面的脚本，它将正常工作

$('body').on('click', '.toggler_row',function(){
   $(this).parent().parent().find('.child_row').slideToggle();
});

---

这将是好的，但我不想使用输入按钮。我们正在使用抓取这个Deal@amosrivera，哈哈，很好的箭头符号。@422，不管单击元素是什么，他给了你功能，如果你想，你可以将输入更改为一个跨度，它只需要有相同的id…@Nick hehe谢谢，我喜欢这些，它们简单有效@422正如nick所说，该功能不依赖于元素类型，但我添加了一个链接宽度跨度，因此您可以看到一点差异。这很酷，但我们在页面上有其他滑块。那么，将此效果添加到其他div按钮的经济（代码）方法是什么，因为您使用的是ID，我不希望所有按钮同时打开lol。

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

$('.toggler_row').live('click',function(){
   $(this).parent().parent().find('.child_row').slideToggle();
});

$('body').on('click', '.toggler_row',function(){
   $(this).parent().parent().find('.child_row').slideToggle();
});