在前端开发中，折叠菜单和选择器是经常使用的UI组件，它们为网站或应用程序提供了更好的用户体验。本文将介绍如何使用HTML、CSS和JavaScript创建折叠菜单和选择器，并提供示例代码。
折叠菜单
折叠菜单是一种常见的导航菜单，可以隐藏其子菜单并仅显示其标题。用户可以单击标题以展开或折叠子菜单。以下是实现折叠菜单的基本步骤：
HTML
<div class="menu">
<div class="menu-title">Menu</div>
<ul class="menu-list">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>CSS
-- -------------------- ---- ------- ----- - ------- --- ----- ----- - ----------- - ----------------- ----- -------- ---- ------- -------- - ---------- - -------- ----- ----------- ----- ------- -- -------- -- - ---------- ---------- - -------- ------ -
JavaScript
const menu = document.querySelector('.menu');
const title = menu.querySelector('.menu-title');
title.addEventListener('click', () => {
menu.classList.toggle('menu-open');
});以上代码将创建一个折叠菜单，单击菜单标题时会切换 menu-open 类，以显示或隐藏子菜单。
选择器
选择器是一种常见的UI组件，通常用于允许用户从预定义选项列表中进行选择。以下是实现选择器的基本步骤：
HTML
<div class="selector">
<div class="selector-current">Option 1</div>
<ul class="selector-options">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
</div>CSS
-- -------------------- ---- ------- --------- - --------- --------- ------- --- ----- ----- - ----------------- - ----------------- ----- -------- ---- ------- -------- - ----------------- - -------- ----- ----------- ----- ------- -- -------- -- --------- --------- ---- ----- ----- -- -------- -- - -------------- ----------------- - -------- ------ -
JavaScript
-- -------------------- ---- -------
----- -------- - ------------------------------------
----- ------- - --------------------------------------------
--------------------------------- -- -- -
-------------------------------------------
---
----- ------- - -------------------------------------------- -- ----
---------------------- -- -
-------------------------------- ------- -- -
-----------------------
----- -------------- - -----------------
----------------- - ---------------
-------------------------------------------
---
---以上代码将创建一个选择器，单击当前选项时会切换 selector-open 类以显示或隐藏选项列表。当用户选择一个选项时，其文本将被设置为当前选项。
结论
折叠菜单和选择器是非常有用的UI组件，可以帮助网站和应用程序提供更好的用户体验。使用HTML、CSS和JavaScript可以轻松地创建这些组件，并使它们具有各种功能。希望本文介绍的示例代码可以对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/750