本文摘要：这篇文章介绍了如何借助jQuery这一JavaScript框架为网站添加动态折叠菜单功能。首先，构建HTML的ul列表结构，并通过CSS进行样式设置。然后，使用jQuery选择器选取含有子ul元素的li标签，并绑定click事件处理函数。在用户点击时，通过toggleClass()方法切换“expanded”类以改变样式，同时运用toggle()函数控制子菜单的显示与隐藏，实现动画过渡效果（速度可调，例如设定为"medium"）。这样，只需简单几行jQuery代码，就能将一个静态的ul菜单转化为交互性更强、用户体验更优的折叠菜单。

JQuery

jQuery是一种普及的JavaScript结构，可以轻松地将动态效果加入网站中。其中一个最常见的效果是收起多有ul导航菜单。运用jQuery建立收起导航菜单非常简单。先在HTML中建立一个ul元素，并将所有子项作为子项加入列表中。运用CSS对列表样式进行配置，然后运用jQuery将导航菜单收起起来。以下是一个基础的ul导航菜单代码例子：

<ul class="menu">
<li>导航菜单项一</li>
<li>导航菜单项二</li>
<li>导航菜单项三
<ul>
<li>子导航菜单项一</li>
<li>子导航菜单项二</li>
<li>子导航菜单项三</li>
</ul>
</li>
<li>导航菜单项四</li>
</ul>

这个例子中包含一个内嵌的ul列表。要将其收起，我们需要运用jQuery选取器并关联一个触发事件。在本例中，我们将运用click事件。以下是jQuery代码：

$(document).ready(function() {
$('li:has(ul)').click(function(event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
return false;
}
});
});

这个代码段中，我们首先运用jQuery的ready()函数来保证所有文档元素都已经加载。接着，运用选取器来选择所有包含子项的li元素，并关联一个click事件。在click事件中，我们先检查点击事件是否是由当前元素触发的。只有当前元素被点击时，我们才会执行代码。接下来，我们运用toggleClass()函数来添加或删除“expanded”类别，这样可以更改文本样式并显示或隐藏子列表。最后，我们运用toggle()函数来达成收起效果，并通过medium参数指定动画的速度。通过这些简单的代码，您可以将收起导航菜单加入自己的网站中，使其更加动态且易用。

名词解释

作为当前文章的名词解释，仅对当前文章有效。

CSS样式设置：CSS (层叠样式表) 是一种样式表语言，用于描述 HTML 或 XML （包括如 SVG、MathML 等 XML方言）文档的呈现。在文章上下文中，CSS 被用作设计和控制 ul 列表样式的手段，包括但不限于列表项的布局、颜色、字体等视觉属性。通过对 ul 菜单应用恰当的 CSS 样式，可以为用户提供直观且吸引人的界面元素。

DOM操作：DOM (文档对象模型) 是网页文档的编程接口，将 HTML 或 XML 文档表示为树形结构，其中每个节点都是一个对象，允许程序和脚本动态更新、添加或删除页面内容及样式。在本文中，jQuery 进行了 DOM 操作，例如通过选择器找到含有子 ul 元素的 li 节点，然后绑定 click 事件以响应用户的点击动作，进而触发折叠菜单的展开与收缩，这些都属于 DOM 操作的具体应用。