jQuery在除current之外的h元素后折叠ul

基础概念

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在这个问题中，我们关注的是使用 jQuery 来操作 DOM 元素，特别是处理 <ul> 和 <h> 元素的显示与隐藏。

类型与应用场景

类型：这是一个关于 DOM 操作和事件处理的问题。
应用场景：适用于需要动态显示或隐藏列表项的网页，如导航菜单、折叠面板等。

示例代码

以下是一个简单的示例，展示了如何在点击除当前（current）之外的 <h> 元素后折叠其后的 <ul> 列表：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Collapse UL</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
  .hidden { display: none; }
</style>
</head>
<body>

<h2 class="header">Section 1</h2>
<ul>
  <li>Item 1.1</li>
  <li>Item 1.2</li>
</ul>

<h2 class="header current">Section 2</h2>
<ul>
  <li>Item 2.1</li>
  <li>Item 2.2</li>
</ul>

<h2 class="header">Section 3</h2>
<ul>
  <li>Item 3.1</li>
  <li>Item 3.2</li>
</ul>

<script>
$(document).ready(function() {
  $('.header').not('.current').click(function() {
    $(this).next('ul').toggleClass('hidden');
  });
});
</script>

</body>
</html>