在点击而不是悬停时显示下拉菜单答案

【问题标题】：Showing a dropdown on click instead of on hover在点击而不是悬停时显示下拉菜单
【发布时间】：2020-10-13 21:38:04
【问题描述】：

我在 Wordpress 上为我的网站使用 Avada（融合主题）主题（正在建设中）。

他们有一个我正在使用的超级菜单选项，但我希望它在有人点击主菜单项而不是悬停在它上面时出现。

网站：www.paradigmtek.com

因此，现在如果有人将鼠标悬停在顶部说“智能家居”，则会出现子菜单（智能家居技术支持、智能集线器或扬声器设置等）。但我希望它出现在点击而不是悬停时。

我认为这不需要一个简单的 CSS 技巧，而是一个 JS 技巧。

任何人有该主题的经验或知道如何做？

【问题讨论】：

您能否提供一个最小的可重现示例，而不仅仅是提供一个链接？回答者更容易知道您想要什么。在此处查看如何生成示例 sn-p：stackoverflow.com/help/minimal-reproducible-example

标签： javascript html css wordpress

【解决方案1】：

您只需添加一个类即可在单击其中一个菜单时更改下拉菜单的不透明度。在下面的示例中，我将show 类添加到dropdown 以在单击菜单时将不透明度从0 更改为1。同时，我在被点击的菜单中添加了一个类（即clicked）给它一个强调色来表明它是被点击的菜单。

const menus = document.querySelectorAll('.menu')
const dropdown = document.querySelector('.dropdown')
let activeMenu = null

menus.forEach(menu => {
  menu.addEventListener('click', e => {
    // Removing previous active menu that is not itself
    if (activeMenu && activeMenu !== menu) {
      activeMenu.classList.remove('clicked')
      activeMenu = menu
    }
    else if (activeMenu && activeMenu === menu) {
      activeMenu = null
    } else {
      activeMenu = menu
    }
    
    menu.classList.toggle('clicked')
    // If there is an active menu, show
    if (activeMenu) dropdown.classList.add('show')
    else dropdown.classList.remove('show')
  })
})

* {
  box-sizing: border-box;
  font-family: Helvetica;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.container {
  display: flex;
  justify-content: center;
  background: #121212;
}

.menu {
  color: white;
  margin: 20px;
  padding: 20px;
  border-radius: 5px;
  cursor: pointer;
}

.menu:hover {
  color: #ff8888;
}

.menu.clicked {
  color: #ff8888;
}

.dropdown {
  width: 100%;
  height: 100px;
  background: #333333;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.dropdown.show {
  opacity: 1;
}

.line {
  width: 100%;
  height: 3px;
  background: #00a5ff;
}

<div class="container">
  <div class="menu">Menu 1</div>
  <div class="menu">Menu 2</div>
  <div class="menu">Menu 3</div>
  <div class="menu">Menu 4</div>
</div>

<div class="dropdown">
  <div class="line"></div>
</div>

【讨论】：

如何修改以使菜单在单击页面中的任何位置时消失？
@sci-guy 这与您原来的问题不同。我建议问一个新的。
@sci-guy 这个解决方案能回答你原来的问题吗？

【解决方案2】：

在选项中：avada options -> menu -> submenu 您只需使用选择按钮指定悬停/单击。

您还可以通过创建布局来构建自己的菜单 -> avada -> 布局

在您的布局中，您可以添加一个菜单元素，在该元素上应用所需的选项。

Getting Started With Avada Layouts

Understanding Custom Headers

How To Use The Menu Element

【讨论】：