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

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

这是不优雅的，因为

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

这两个问题都可以通过更多代码轻松解决。