Question

我正在寻找一种根据点击内容切换课程的方法。举个例子，我有这个：

<div id="element_1"> <!-- notice unique id attached to the end -->
   <button>My Button</button>
   <div class="hidden_wrapper">
      <span>Something</span>
      <span>Something else</span>
   </div>
</div>

根据我的理解，我可以做这样的事情来触发那个唯一的ID（未经测试）：

$(document).on("click", "[id^=element] button", function() { $('[id^=element] hidden_wrapper').toggleClass('some_class'); });

我想要的是，如果点击#element_1 .hidden_wrapper以外的任何内容，则在该唯一ID（实际上会移除该类）下切换该类

有人可以在这里说清楚吗？

Answer 1

为整个文档设置单击处理程序。在该处理程序中，在除目标之外的所有元素上切换类。这是一个快速而肮脏的版本;更优雅的方法是可能的。

$("html").on("click", function() {
    $(".hidden_wrapper").toggleClass("some_class");
    $(this).next().toggleClass("some_class");
})

这是不优雅的，因为

它切换你不想改变两次的元素（有点像双重否定）
这取决于元素是按钮的下一个兄弟。

使用更多代码可以轻松解决这两个问题。

如果单击了唯一元素/如果在div外部单击（包括另一个唯一元素）

1 个答案: