如何制作带有可扩展和隐藏项目的侧边菜单？

Question

要为我的应用程序创建侧边菜单，我找到了一个使用 DrawerLayout 和

NavigationView

的

tutorial

。它适用于菜单项但不适用于子菜单：

如上图所示，“Búsqueda”菜单项转换为副标题，子菜单项（“Futbolista”、“Entrenador”和“Temporada”）失去了左边的空白，因为它们没有图标。

如果我删除包含三个子项的

<menu></menu>

标签，那么结果看起来更好：

我的期望是“Búsqueda”项目默认折叠，当用户点击它时，会显示“Futbolista”、“Entrenador”和“Temporada”。像这样的东西：

此外，我想指出，在此菜单中有一个登录选项（“Iniciar sesión”）。此选项将根据用户是否登录在登录和注销之间切换。但也取决于此，我想隐藏或显示其他一些菜单项（“Insertar”、“Modificar”、“Eliminar”）。只有在用户登录时才会显示这些项目。

我看过一些使用

ListView

或

ExpandableListView

等不同解决方案的教程和视频，但我不确定是否有任何更简单的解决方案或者在我的情况下什么可能是最好的方法。

因此，拥有带有可扩展和隐藏项目的侧边菜单的最佳方法是什么？

Answer 1

要创建带有可展开和隐藏项目的侧边菜单，您可以使用 HTML、CSS 和 JavaScript。这是一个如何实现这个的例子：

HTML :

<div class="menu">
  <ul>
    <li class="expandable">
      <a href="#">Expandable Item</a>
      <ul>
        <li><a href="#">Sub Item 1</a></li>
        <li><a href="#">Sub Item 2</a></li>
        <li><a href="#">Sub Item 3</a></li>
      </ul>
    </li>
    <li><a href="#">Hidden Item</a></li>
  </ul>
</div>

CSS：

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  display: block;
  margin: 0;
  padding: 0;
}

.menu a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color:

Javascript：

const expandableItems = document.querySelectorAll('.expandable');
expandableItems.forEach(item => {
  item.addEventListener('click', () => {
    item.classList.toggle('open');
  });
});

说明：

HTML 代码创建了一个包含两个项目的基本菜单结构，一个带有嵌套子菜单的可扩展项目和一个隐藏项目。

CSS 代码为菜单项设置样式并默认隐藏可扩展项的子菜单。

JavaScript 代码为每个可扩展项目添加了一个点击事件监听器。单击时，它会切换项目上的“打开”类，这将根据 CSS 选择器显示或隐藏子菜单。

您可以修改 HTML、CSS 和 JavaScript 代码以满足您的特定需求和样式偏好。 加密新闻 网站