在纯 JavaScript 中单击时显示子菜单

Question

解决方法见下文

由于以下 CSS，我构建了一个下拉菜单，其中子菜单当前显示在悬停状态：

.main-menu ul li:hover > ul { display: block; }

但是，我的设计要求子菜单在单击时显示并保持可见，直到用户单击页面上的其他位置（或本示例中的关闭按钮）。基于此处的一些类似问题，例如css hover to onclick conversation，看来我需要使用 JavaScript setAttribute 在点击时添加类 active：

.main-menu ul li.active > ul { display: block; }

我看到的示例通过使用下面的 JS 来实现这一点，它通过 ID 获取元素，但我显然无法为每个子菜单提供相同的 ID。我可以给每个不同的 ID，然后每次都编写一个新函数，但是有没有更好的方法来“获取”这些元素？我已经使用类和querySelectorAll() 进行了测试，以尝试定位确切的标签，但我显然遗漏了一些东西。如果有人能指出正确的方向，我将不胜感激。

window.onload = init;
function init()
{
    document.getElementById('openSubmenu').onclick   = openSubmenu;
    document.getElementById('closeSubmenu').onclick  = closeSubmenu;
}

function openSubmenu()
{
    document.getElementById('openSubmenu').setAttribute('class','active');
}

function closeSubmenu()
{
    document.getElementById('openSubmenu').removeAttribute('class','active');
}

HTML：

<div id="closeSubmenu">Close submenu</div>
<nav>
  <div class="main-menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li id="openSubmenu"><a href="#">Dropdown 1</a>
        <ul>
          <li><a href="#">First tier</a></li>
          <li><a href="#">First tier</a></li>
        </ul>  
      </li>
      <li><a href="#">Dropdown 2</a>
        <ul>
          <li><a href="#">First tier</a></li>
          <li><a href="#">First tier</a></li>
          <li><a href="#">First tier</a></li>
       </ul>
      </li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</nav>

CSS：

.main-menu {
  width: 100%;
  left: 0;
}

.main-menu ul {
  position: relative;
  text-align: center;
}

.main-menu ul li { display: inline-block; }

.main-menu li a {
  line-height: 40px;
  padding: 10px 20px;
  text-transform: uppercase;
  text-decoration: none;
  color: #494949;
}

/* Hide dropdowns by default */

.main-menu ul ul {
  width: 100%;
  position: absolute;
  display: none;
  left: 0;
  background-color: #c6c6c6;
}

/* Display Dropdowns on Hover */

.main-menu ul li:hover > ul { display: block; }

/* Display Dropdowns on Click */

.main-menu ul li.active > ul { display: block; }

解决方案

使用以下代码打开相关子菜单 点击时，再次点击子菜单名称时关闭，点击时关闭 点击常规的“非子菜单”元素。

HTML

<nav>
    <ul>
      <li class="menuItem"><a href="#">Home</a></li>
      <li class="submenu"><a href="#">Dropdown 1</a>
        <ul>
          <li><a href="#">First tier</a></li>
          <li><a href="#">First tier</a></li>
        </ul>  
      </li>
      <li class="submenu"><a href="#">Dropdown 2</a>
        <ul>
          <li><a href="#">First tier</a></li>
          <li><a href="#">First tier</a></li>
          <li><a href="#">First tier</a></li>
       </ul>
      </li>
      <li class="menuItem"><a href="#">Link</a></li>
      <li class="menuItem"><a href="#">Link</a></li>
    </ul>
</nav>

CSS

nav {
  width: 100%;
  left: 0;
}

nav ul {
  position: relative;
  text-align: center;
}

nav ul li { display: inline-block; }

nav li a {
  line-height: 40px;
  padding: 10px 20px;
  text-transform: uppercase;
  text-decoration: none;
  color: #494949;
}

/* Hide dropdowns by default */

nav ul ul {
  width: 100%;
  position: absolute;
  display: none;
  left: 0;
  background-color: #c6c6c6;
}

/* Display Dropdowns on Click */

nav ul li.active > ul {
  display: block;
}

JS

window.onload = init;
function init()
{
  // set-up regular buttons
  var menuItemElements = document.getElementsByClassName('menuItem');
  for (var i = 0; i < menuItemElements.length; i++) {
    menuItemElements[i].onclick = resetSubmenus;
  }
  // set-up buttons with submenu
  resetSubmenus();
}

function openSubmenu()
  {
    resetSubmenus();
    this.setAttribute('class','submenu active');
    this.onclick = resetSubmenus;
  }

function resetSubmenus()
  {
    var submenuElements = document.getElementsByClassName('submenu');
    for (var i = 0; i < submenuElements.length; i++) {
      submenuElements[i].setAttribute('class','submenu');
      submenuElements[i].onclick = openSubmenu;
    }
}

Answer 1

如果不给你确切的代码......我可能会做这样的事情：

为两个下拉菜单指定一个 dropdown 类。给子菜单一个submenu的类。

将点击处理程序附加到类dropdown，然后在点击时，使用关键字this，我会区分哪个被点击并添加active 类。

我会有一个名为 active 的 CSS 类，它具有正确显示打开下拉菜单所需的正确 CSS。

类似：

.active .submenu{
  */ submenu CSS */
}

然后，我需要考虑向后滑动，所以当再次单击任何下拉菜单（就像上面一样），或者可能在下拉菜单之外的页面上的任何位置时，我会首先删除 active 类所有下拉元素，然后将其添加到被单击的新元素，因此只有被单击的元素。

不确定这对你有多大帮助，但你去吧:)