点击时展开和收起div

Question

我正在使用以下代码来使用js打开和关闭一个div（向上/向下滑动）

我已经将向下滑动事件附加到按钮上，将向上滑动事件附加到关闭文本上。

我想要的是，点击按钮可以打开，再次点击可以关闭滑动元素。

以下是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>

需要任何帮助。

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

感谢任何帮助。干杯。

- 422

Answer 1

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

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

这里有一个演示。

- mVChr

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

});

- FatherStorm

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/

- amosrivera

---

@amosrivera，哈哈，箭头符号很不错。 - The Muffin Man

@422，无论单击元素是什么，他已经为您提供了功能，如果您愿意，可以将输入更改为span，只需具有相同的ID即可... - The Muffin Man

@Nick 嘿嘿谢谢，我喜欢它们，它们简单而有效。@422 正如Nick所说，功能不依赖于元素类型，但我添加了一个带有span的链接，这样你就可以看到小差异了。 - amosrivera

请使用相同的切换逻辑，以及您正在执行的父级遍历。 - amosrivera

这是@amosrivera的演示，可用于每页多个项目。http://jsfiddle.net/AYWku/7/ - Bjarki Heiðar

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

- Harsha