程序员经验分享-hwhale

Vanilla Javascript 切换下拉菜单

2024-01-04

我的大脑已经检查过了周末......

我正在寻找一种纯 Javascript 解决方案，如果在单击另一个主菜单项时打开一个下拉菜单框，则先前打开的下拉菜单将关闭，然后显示新单击的主菜单项的下拉菜单。我知道这可能很简单，但我无法想出一个不复杂的解决方案。

此外，如果您单击菜单项外部（文档中不是菜单项或下拉框的任何位置），则应关闭所有打开的下拉菜单。

感谢您的任何帮助。

function testFunc(el) {
  var parent = el.parentElement;
  var dd = parent.lastChild.previousSibling;
  dd.classList.toggle('show');
}
ul { list-style: none; margin: 0; padding: 0; }
ul li {
  width: 100px;
  float: left;
  background: #dbdbdb;
  line-height: 2em;
  text-align: center;
  margin: 0 5px;
  cursor: pointer;
}
ul li span {
  display: block;
}
ul li ul {
  display: none;
}

.show {
  display: block;
}
<ul>
  <li>
    <span onclick="testFunc(this)">Item 1</span>
    <ul>
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
    </ul>
  </li>
  <li>
    <span onclick="testFunc(this)">Item 2</span>
    <ul>
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
    </ul>
  </li>
  <li>
    <span onclick="testFunc(this)">Item 3</span>
    <ul>
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
    </ul>
  </li>
  <li>
    <span onclick="testFunc(this)">Item 4</span>
    <ul>
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
    </ul>
  </li>
</ul>

切换菜单可见性

您可以将上次打开的菜单保存在变量中opened函数之外。然后当点击菜单时如果opened is not null它将切换opened（即隐藏上次打开的菜单）并切换单击的项目。

let opened = null

function testFunc(el) {

  // gets the <ul> element of the clicked menu item
  const menu = el.parentElement.lastChild.previousSibling;

  if (!opened) {

    // no menu item is shown
    opened = menu
    opened.classList.toggle('show');

  } else if (menu == opened) {

    // the clicked item is already showing
    menu.classList.toggle('show')
    opened = null

  } else {

    // the clicked item is hiddden but another one is showing
    opened.classList.toggle('show')
    opened = menu
    opened.classList.toggle('show')

  }

}

这是代码：

let opened = null

function testFunc(el) {

  const menu =  el.parentElement.lastChild.previousSibling;
  
  if(!opened) {
    opened = menu
    opened.classList.toggle('show');
  } else if(menu == opened) {
    menu.classList.toggle('show')
    opened = null
  } else {
    opened.classList.toggle('show')
    opened = menu
    opened.classList.toggle('show')
  }
  
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  width: 100px;
  float: left;
  background: #dbdbdb;
  line-height: 2em;
  text-align: center;
  margin: 0 5px;
  cursor: pointer;
}

ul li span {
  display: block;
}

ul li ul {
  display: none;
}

.show {
  display: block;
}
<ul>
  <li>
    <span onclick="testFunc(this)">Item 1</span>
    <ul>
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
    </ul>
  </li>
  <li>
    <span onclick="testFunc(this)">Item 2</span>
    <ul>
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
    </ul>
  </li>
  <li>
    <span onclick="testFunc(this)">Item 3</span>
    <ul>
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
    </ul>
  </li>
  <li>
    <span onclick="testFunc(this)">Item 4</span>
    <ul>
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
    </ul>
  </li>
</ul>

ES6 语法的变体

这是带有一些 ES6 语法的变体，请注意，我更改了 HTML 命名结构以更好地维护代码，通过类名调用元素允许

  • 不必使用内联事件侦听器

  • 在一行中调用所有菜单项

这是 JavaScript 代码：

let opened = null
const toggleVisibility = e => e.classList.toggle('show')

const toggleDropDown = e => {

  const clickedItem = e.target.parentElement.lastChild.previousSibling

  toggleVisibility(clickedItem);

  if (!opened) {
    opened = clickedItem
  } else if (opened == clickedItem) {
    opened = null
  } else {
    toggleVisibility(opened);
    opened = clickedItem
  }

}

[...document.querySelectorAll('.dropDown')].forEach(dropDown => dropDown.addEventListener('click', toggleDropDown))

let opened = null
const toggleVisibility = e => e.classList.toggle('show')

const toggleDropDown = e => {

  const clickedItem = e.target.parentElement.lastChild.previousSibling

  toggleVisibility(clickedItem);

  if (!opened) {
    opened = clickedItem
  } else if (opened == clickedItem) {
    opened = null
  } else {
    toggleVisibility(opened);
    opened = clickedItem
  }

}

[...document.querySelectorAll('.dropDown')].forEach(dropDown => dropDown.addEventListener('click', toggleDropDown))
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  width: 100px;
  float: left;
  background: #dbdbdb;
  line-height: 2em;
  text-align: center;
  margin: 0 5px;
  cursor: pointer;
}

ul li span {
  display: block;
}

ul li ul {
  display: none;
}

.show {
  display: block;
}
<ul>
  <li>
    <span class="dropDown">Item 1</span>
    <ul>
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
    </ul>
  </li>
  <li>
    <span class="dropDown">Item 2</span>
    <ul>
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
    </ul>
  </li>
  <li>
    <span class="dropDown">Item 3</span>
    <ul>
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
    </ul>
  </li>
  <li>
    <span class="dropDown">Item 4</span>
    <ul>
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
    </ul>
  </li>
</ul>

切换菜单可见性+单击其他地方时关闭

如果您想在用户单击菜单外部时关闭任何打开的菜单，您需要在文档本身上有一个事件侦听器。因此，您不必为每个菜单按钮配备一个事件侦听器，而是让一个事件侦听器监视文档中发生的任何点击。

事件侦听器将确定单击的项目是否是菜单按钮，在这种情况下，它将运行菜单处理程序。否则它将关闭最后打开的菜单项。

JavaScript 代码：

let opened = null
const toggleVisibility = e => e.classList.toggle('show')

const handleDropdown = e => {

  const clickedItem = e.parentElement.lastChild.previousSibling

  toggleVisibility(clickedItem)

  if (!opened) {
    opened = clickedItem
  } else if (opened == clickedItem) {
    opened = null
  } else {
    toggleVisibility(opened)
    opened = clickedItem
  }

}

const handleClick = e => {

  if (e.target.className.includes('dropDown')) {
    handleDropdown(e.target)
  } else if (opened) {
    toggleVisibility(opened)
    opened = null
  }

}

document.addEventListener('click', handleClick)

这是完整的代码：

let opened = null
const toggleVisibility = e => e.classList.toggle('show')

const handleDropdown = e => {

  const clickedItem = e.parentElement.lastChild.previousSibling

  toggleVisibility(clickedItem)

  if (!opened) {
    opened = clickedItem
  } else if (opened == clickedItem) {
    opened = null
  } else {
    toggleVisibility(opened)
    opened = clickedItem
  }

}

const handleClick = e => {

  if (e.target.className.includes('dropDown')) {
    handleDropdown(e.target)
  } else if (opened) {
    toggleVisibility(opened)
    opened = null
  }

}

document.addEventListener('click', handleClick)
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  width: 100px;
  float: left;
  background: #dbdbdb;
  line-height: 2em;
  text-align: center;
  margin: 0 5px;
  cursor: pointer;
}

ul li span {
  display: block;
}

ul li ul {
  display: none;
}

.show {
  display: block;
}
<ul>
  <li>
    <span class="dropDown">Item 1</span>
    <ul>
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
    </ul>
  </li>
  <li>
    <span class="dropDown">Item 2</span>
    <ul>
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
    </ul>
  </li>
  <li>
    <span class="dropDown">Item 3</span>
    <ul>
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
    </ul>
  </li>
  <li>
    <span class="dropDown">Item 4</span>
    <ul>
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
    </ul>
  </li>
</ul>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

Navigation

toggle

Vanilla Javascript 切换下拉菜单 的相关文章

随机推荐

  • 检查从每一组中至少选择一个单选按钮（使用 jquery）

    我在表单上动态拉动并显示单选按钮问题 通过 jquery 选项卡分为不同的部分 因此 有很多 2 3 4 5 等单选按钮在一起 它们具有相同的 名称 但 id 不同 当您在各部分之间点击下一步时 我想检查是否为每组至少选择了一个单选按钮 当

  • Angular 4 和 Bootstrap 4 - 合并验证类

    今天我发现我的应用程序中的验证并不总是正确显示 在一个特定的例子中 角度将失败required if

  • 如何将新的 Orderer 组织添加到现有的 Hyperledger Fabric 网络

    我正在尝试向基于 RAFT 的现有订购服务添加一个新的订购者组织 我正在使用first network from fabric samples作为基础网络 在生成加密材料时 我进行了修改 为另外 1 个订购者组织生成加密材料 这crypto

  • 如何在PyQt5中正确异步加载图像？

    我正在尝试弄清楚如何完成异步图像加载正确地 在 PyQt Qlistview 中 我的主要小部件包括Qlistview and a QLineEdit文本框 我有一个演员数据库 我使用以下子类进行查询QAbstractListModel当在

  • 如何限制计算引擎仅接受来自应用程序引擎的请求

    我正在运行我的服务器Google App engine我在哪里使用nodejs我还有所有其他服务 例如mongoDB Elasticsearch and Redis部署于Compute engine 现在 出于安全考虑 在所有数据库实例 M

  • 如何在 TimePickerAndroid 中为反应本机设置最短日期

    我使用react native创建了一个简单的表单library https github com xgfe react native datepicker与开始时间和结束时间 我问自己为什么我可以在ios上毫无问题地设置开始时间和结束时间

  • 无法使我的 Spring Boot 应用程序与 jsp 一起工作

    我的有问题弹簧靴网络应用程序 它用嵌入式码头 它必须是 jetty 而不是 tomcat 并且它使用jsp意见 但似乎没有办法让嵌入式 jetty 与 jsp 视图一起工作 实际上 当我运行 mu 应用程序服务器时 服务器已成功启动 但是当

  • mysql 酒店客房供应情况

    我在Mysql中有一个可用性表如下 id room id int 11 avail date date 对于每个房间 每个可用日期都有一行 可能存在间隙 例如房间 1 可能有 8 月 1 2 3 5 6 13 14 15 的条目 每隔一天就

  • 如何使用 JSBN 加密 Crypto-JS 密钥？

    我在用着JSBN http www cs students stanford edu tjw jsbn 使用公钥 私钥对加密 解密数据 它非常适合文本数据 包括十六进制字符串 我的问题是现在我有二进制数据 特别是加密JS https cod

  • Oracle 中的有效日期检查

    我有一个以 varchar 格式存储的日期值 有效日期或无效日期 是否可以在sql查询中检查日期是否有效 是的 如果你知道格式并且很少使用 plsql 假设您有格式的日期 yyyy mon dd hh24 mi ss create func

  • IE：indexOf 结果“对象不支持此属性或方法”

    我有以下 if 语句 if buyArray indexOf dealWith 0 1 这是在 ie 即 XP 上的 8 中出现 对象不支持此属性或方法 的情况 有人有解决这个问题的方法吗 是的 IEindexOf 您可以实现如下所示的垫片

  • 具有可用 Eclipse Mylyn 支持的 git 分布式问题跟踪器？

    我在用着git用于版本控制 但我目前缺乏一个好的问题 错误 票证跟踪器与 Eclipse Mylyn 集成 我正在寻找的功能 开源实现 以便我可以添加将来需要的功能 优先使用 GPL LGPL MIT 或 BSD 许可证 分散式 问题mus

  • Azure 表存储异常：409 意外冲突？

    我正在使用 WindowsAzure Storage nuget 包版本 9 0 0 Install Package WindowsAzure Storage Version 9 0 0 以下代码 table CreateIfNotExis

  • 如何在 Django 中加载主干的引导模型

    当主干应用程序加载时 对于我的应用程序来说 这意味着页面已加载 我需要初始收集数据 主干文档说 我不明白这一点 这是否意味着我应该使用初始数据渲染页面 例如 collection initial data 我在后端使用 django 那么如

  • 示例无效的 utf8 字符串？

    我正在测试我的一些代码如何处理错误数据 并且我需要一些无效 UTF 8 的字节序列 你能发布一些 最好能解释一下为什么它们不好 你从哪里得到它们吗 In PHP examples array Valid ASCII gt a Valid 2

  • PhoneGap 还是 JqueryMobile？ [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我在 PhoneGap Cordova 上构建了应用程序 并在此过程中遇到了很多困难 因此我想我的下一个版本将使用 jQuery Mobile

  • Django 'image' 属性没有与之关联的文件

    当用户注册我的应用程序时 当他到达个人资料页面时 我收到此错误 The image attribute has no file associated with it Exception Type ValueError Error durin

  • VS Code 无法识别 Pi Pico SDK 标头

    所以我已经完成了在 Linux 的 Windows 子系统中编译的所有设置 一切都工作正常 我正在 VS Code 中编写代码 但它无法识别 pico stdlib h 等标头 代码编译并工作正常 但最好能正确设置代码 这样我就可以获得自动

  • JavaScript 对象 ID

    JavaScript 对象 变量是否有某种唯一标识符 就像鲁比那样object id 我指的不是 DOM id 属性 而是某种内存地址 如果您想在不修改底层对象的情况下查找 关联具有唯一标识符的对象 您可以使用WeakMap https d

  • Vanilla Javascript 切换下拉菜单

    我的大脑已经检查过了周末 我正在寻找一种纯 Javascript 解决方案 如果在单击另一个主菜单项时打开一个下拉菜单框 则先前打开的下拉菜单将关闭 然后显示新单击的主菜单项的下拉菜单 我知道这可能很简单 但我无法想出一个不复杂的解决方案

热门标签