Javascript 如何使用第二个单击处理程序关闭JS下拉列表

我有一个功能，可以让你打开和关闭隐藏的下拉列表，你可以在链接中看到，但我想也能够关闭已经打开的下拉列表，如果你再次点击相同的图像

目前，我只能关闭单击元素外部的那些

主要代码片段（已连接就绪），完整的工作示例-：

HTML:

标题
通过CSS隐藏的幻灯片内容
“活动”类不存在

对代码的这一更改似乎达到了预期效果：

$('.slide').on('touchstart click', function() {

    if ( $(this).hasClass("active") ) {
        close();
    } else {
        close();
        $(this).addClass("active");
        $(this).css("padding-bottom", height);
    }
});  

由于您的

close（）

函数从元素中删除了

active

类，因此您需要将其放置在一个不会干扰您在

active

类周围检查的条件的位置。将其移动到

if

块中是解决问题的一个简单而快速的更改。有些人可能会对两个块中重复出现

close（）

的方式感到困扰。如果你是这些人中的一员，适当地重构。只是不要在

之外执行明显的移动
close（）
，如果

/

那么

，因为这会导致此问题再次出现

---

Fiddle:

由于某些原因，不允许我添加此链接，很抱歉，我已将其添加到此处内联示例。。。删除了感谢信…啊，谢谢你。。。我明白了。。所以基本上我所做的总是以一个开放的下拉列表结束。。其中，除非该类未处于活动状态，否则将关闭它。。

 <div class="slide"> title 
      <div class="js-slide">content of slide  hidden via CSS when 
        "active" class is not present</div>
 </div>

$('.slide').on('touchstart click', function() {

    if ( $(this).hasClass("active") ) {
        close();
    } else {
        close();
        $(this).addClass("active");
        $(this).css("padding-bottom", height);
    }
});