再次单击时的jQuery slideUp（）内容

Question

仅当第二次单击“ .areaCodeList”时，我将如何对内容进行slideUp（）？

$(".areaCodeList").on('click', function() {
    $(this).next('.churchList').slideDown();
    ($this.die());
    $('.churchList').slideUp();
});

Answer 1

您可以使用某些类来表明它在运行代码之前已被单击

$(".areaCodeList").on('click', function() {
  if (!$(this).is('.clicked')){
    $(this).addClass('clicked');
    return false;
  }
  $(this).next('.churchList').slideDown();
  $(this).die();
  $('.churchList').slideUp();
});

您也可以考虑使用属性（ $(el).attr('clicked') ）代替类，并在以后以类似方式进行检查。

更新：问题标题确实令人困惑，似乎只有我们许多人（回答问题）从一开始就没有理解它：

最初我是这样的：

如果元素第二次单击，则向上滑动元素。 如果是这种情况，那么我提供的示例是正确的。

但是看起来问题更像是这样：

每次单击均将元素向下滑动，而每次单击均将其向上滑动。

如果是这种情况，那么slideToggle是解决方案（如epascarello的答案所述 ）

Answer 2

您应该使用slideToggle（）

$(".areaCodeList").on('click', function() {
    $(this).next('.churchList').slideToggle();
});

例

Answer 3

您可以检查.churchList是否可见（向下滑动）：

$(".areaCodeList").on('click', function() {
    if( $(this).next('.churchList').is(':visible') === true){
        $(this).next('.churchList').slideUp();
    }else{
        $(this).next('.churchList').slideDown();
    }
});