在单击时显示下拉菜单，而不是在悬停时显示

Question

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

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

网址：www.paradigmtek.com

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

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

有没有人有这个主题的经验或者知道怎么做？

Answer 1

您可以简单地添加一个类，以便在单击其中一个菜单时更改下拉菜单的不透明度。在下面的示例中，我将在dropdown中添加show类，以便在单击菜单时将不透明度从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>

​

Answer 2

在options：-> options -> menu avad子菜单中，您只需使用选择按钮指定悬停/单击即可。

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

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

Getting Started With Avada Layouts

Understanding Custom Headers

How To Use The Menu Element