如何在按钮单击时添加CSS类以隐藏菜单而不阻止未来的交互

ivqmmu1c  于 2023-05-08  发布在  其他
关注(0)|答案(4)|浏览(99)

我有一个组件，当5个导航项中的一个悬停在上面时，会出现一个大型菜单（并保持可见，直到失去焦点或关闭）。
目前，每当单击关闭按钮时，我都会向mega-menu添加一个类display: none以隐藏视图。然而，这意味着大菜单不能被重新打开（当用户再次悬停时）。
我怎样才能切换这些类，使按钮实际上关闭了大菜单，但不妨碍未来的互动？

const desktopMegaMenu = document.querySelector('.mega-menu');
const desktopCloseBtn = document.querySelector('.close-btn-desktop');

desktopCloseBtn.addEventListener('click', () => {
    desktopMegaMenu.classList.add('hide');
});
.container {
  max-height: 112px;
  
}

.nav-menu {
  min-height: 112px;
  padding-left: 5.6rem;
  padding-right: 5.6rem;
  background-color: green;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.nav-menu li {
  list-style: none;
  pointer-events: all;
}

.nav-menu li a {
  color: white;
  text-decoration: none;
  padding-top: 47px;
  padding-bottom: 47px;
}

.nav-menu li a:hover{
  text-decoration: underline;
}

.mega-menu {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  background-color: lightblue;
  width: 100%;
  min-height: 250px;
  top: 128px;
  text-align: center;
}

.nav-menu:hover + .mega-menu {
  visibility: visible; 
  opacity: 1;
}

.mega-menu:hover {
  visibility: visible; 
  opacity: 1;
}

.hide {
  display: none;
}
<div class="container">
  <ul class="nav-menu">
    <li>
      <a href="#">Navigation item</a>
    </li>
    <li>
      <a href="#">Navigation item</a>
    </li>
    <li>
      <a href="#">Navigation item</a>
    </li>
    <li>
      <a href="#">Navigation item</a>
    </li>
    <li>
      <a href="#">Navigation item</a>
    </li>
  </ul>

  <div class="mega-menu">
This mega menu is visible when a nav item is hovered on, or the mega menu itself is being hovered on. 

The problem I am facing is that when the user closes to the mega menu (by adding display: none) - future interactions no longer display the mega menu.
    <button class="close-btn-desktop">Close mega menu</button>
  </div>
</div>
css

4条答案

按热度按时间
emeijp43

emeijp431#

按下关闭按钮后，菜单不再出现，因为新添加的类隐藏始终存在，所以重新悬停后显示也为无。
我为你添加了一段javascript来移除悬停时的hide类，如下所示：

const desktopMegaMenu = document.querySelector('.mega-menu');
const desktopCloseBtn = document.querySelector('.close-btn-desktop');

desktopCloseBtn.addEventListener('click', () => {
  desktopMegaMenu.classList.add('hide');
});

//New js
//Use to remove the hide class when hover
const navMenu = document.querySelector('.nav-menu');

navMenu.addEventListener('mouseover', () => {
  desktopMegaMenu.classList.remove('hide');
});
.container {
  max-height: 112px;
}

.nav-menu {
  min-height: 112px;
  padding-left: 5.6rem;
  padding-right: 5.6rem;
  background-color: green;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.nav-menu li {
  list-style: none;
  pointer-events: all;
}

.nav-menu li a {
  color: white;
  text-decoration: none;
  padding-top: 47px;
  padding-bottom: 47px;
}

.nav-menu li a:hover{
  text-decoration: underline;
}

.mega-menu {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  background-color: lightblue;
  width: 100%;
  min-height: 250px;
  top: 128px;
  text-align: center;
}

.nav-menu:hover + .mega-menu {
  visibility: visible; 
  opacity: 1;
}

.mega-menu:hover {
  visibility: visible; 
  opacity: 1;
}

.hide {
  display:none;
}
<div class="container">
  <ul class="nav-menu">
    <li>
      <a href="#">Navigation item</a>
    </li>
    <li>
      <a href="#">Navigation item</a>
    </li>
    <li>
      <a href="#">Navigation item</a>
    </li>
    <li>
      <a href="#">Navigation item</a>
    </li>
    <li>
      <a href="#">Navigation item</a>
    </li>
  </ul>

  <div class="mega-menu">
This mega menu is visible when a nav item is hovered on, or the mega menu itself is being hovered on. 

The problem I am facing is that when the user closes to the mega menu (by adding display: none) - future interactions no longer display the mega menu.
    <button class="close-btn-desktop">Close mega menu</button>
  </div>
</div>
赞(0）分享  回复(0）举报  2023-05-08
b4lqfgs4

b4lqfgs42#

考虑到您当前的方法，最明显的方法是当用户将光标移回.nav-menu时从元素中删除hide类：

const desktopMegaMenu = document.querySelector('.mega-menu');
const desktopCloseBtn = document.querySelector('.close-btn-desktop');

// new variable, caching the '.nav-menu' element:
const navMenu = document.querySelector('.nav-menu');

desktopCloseBtn.addEventListener('click', () => {
  desktopMegaMenu.classList.add('hide');
});

// using EventTarget.addEventListener() to bind the anonymous
// Arrow function as the event-handler for the 'mouseenter'
// event:
navMenu.addEventListener('mouseenter', () => {
  // here use the Element.classList API to remove the
  // 'hide' class from the desktopMegaMenu element:
  desktopMegaMenu.classList.remove('hide')
});
.container {
  max-height: 112px;
}

.nav-menu {
  min-height: 112px;
  padding-left: 5.6rem;
  padding-right: 5.6rem;
  background-color: green;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.nav-menu li {
  list-style: none;
  pointer-events: all;
}

.nav-menu li a {
  color: white;
  text-decoration: none;
  padding-top: 47px;
  padding-bottom: 47px;
}

.nav-menu li a:hover {
  text-decoration: underline;
}

.mega-menu {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  background-color: lightblue;
  width: 100%;
  min-height: 250px;
  top: 128px;
  text-align: center;
}

.nav-menu:hover+.mega-menu {
  visibility: visible;
  opacity: 1;
}

.mega-menu:hover {
  visibility: visible;
  opacity: 1;
}

.hide {
  display: none;
}
<div class="container">
  <ul class="nav-menu">
    <li>
      <a href="#">Navigation item</a>
    </li>
    <li>
      <a href="#">Navigation item</a>
    </li>
    <li>
      <a href="#">Navigation item</a>
    </li>
    <li>
      <a href="#">Navigation item</a>
    </li>
    <li>
      <a href="#">Navigation item</a>
    </li>
  </ul>

  <div class="mega-menu">
    This mega menu is visible when a nav item is hovered on, or the mega menu itself is being hovered on. The problem I am facing is that when the user closes to the mega menu (by adding display: none) - future interactions no longer display the mega menu.
    <button class="close-btn-desktop">Close mega menu</button>
  </div>
</div>
赞(0）分享  回复(0）举报  2023-05-08
nwlqm0z1

nwlqm0z13#

可以使用以下代码：

const desktopMegaMenu = document.querySelector('.mega-menu');
      const desktopCloseBtn = document.querySelector('.close-btn-desktop');
const a = document.querySelectorAll("a");
      desktopCloseBtn.addEventListener('click', () => {
        desktopMegaMenu.style.visibility = "hidden";
      });
      
a.forEach( element => {
      element.addEventListener('mouseover', () => {
        desktopMegaMenu.style.visibility = "visible";
      });
      });
.container {
  max-height: 112px;
  
}

.nav-menu {
  min-height: 112px;
  padding-left: 5.6rem;
  padding-right: 5.6rem;
  background-color: green;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.nav-menu li {
  list-style: none;
  pointer-events: all;
}

.nav-menu li a {
  color: white;
  text-decoration: none;
  padding-top: 47px;
  padding-bottom: 47px;
}

.nav-menu li a:hover{
  text-decoration: underline;
}

.mega-menu {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  background-color: lightblue;
  width: 100%;
  min-height: 250px;
  top: 128px;
  text-align: center;
}

.nav-menu:hover + .mega-menu {
  visibility: visible; 
  opacity: 1;
}

.mega-menu:hover {
  visibility: visible; 
  opacity: 1;
}
<div class="container">
  <ul class="nav-menu">
    <li>
      <a href="#">Navigation item</a>
    </li>
    <li>
      <a href="#">Navigation item</a>
    </li>
    <li>
      <a href="#">Navigation item</a>
    </li>
    <li>
      <a href="#">Navigation item</a>
    </li>
    <li>
      <a href="#">Navigation item</a>
    </li>
  </ul>

  <div class="mega-menu">
This mega menu is visible when a nav item is hovered on, or the mega menu itself is being hovered on. 

The problem I am facing is that when the user closes to the mega menu (by adding display: none) - future interactions no longer display the mega menu.
    <button class="close-btn-desktop">Close mega menu</button>
  </div>
</div>

希望你觉得这有用！

赞(0）分享  回复(0）举报  2023-05-08
bjp0bcyl

bjp0bcyl4#

我建议一个解决方案：
所以我主要使用js函数，并在css中删除了你的悬停状态，所以在同一个地方有相同的动作。
你可以使用一个新的函数在悬停导航项时添加你的可见类，然后通过点击关闭按钮移除它：
1：我添加了“nav-link”类到您的导航项;
2：我在导航项上添加了一个功能“mouseover”，使大菜单出现，通过添加一个类“is-visible”，并通过点击关闭按钮删除它;
3：我在css中添加了类“is-visible”;

const desktopMegaMenu = document.querySelector('.mega-menu');
const desktopCloseBtn = document.querySelector('.close-btn-desktop');
var links = document.querySelectorAll('.nav-link');

links.forEach(link => {
  link.addEventListener('mouseover', function(){
    desktopMegaMenu.classList.add('is-visible');
  })
});

desktopCloseBtn.addEventListener('click', function(){
  desktopMegaMenu.classList.remove('is-visible')
});
.container {
  max-height: 112px;
  
}

.nav-menu {
  min-height: 112px;
  padding-left: 5.6rem;
  padding-right: 5.6rem;
  background-color: green;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.nav-menu li {
  list-style: none;
  pointer-events: all;
}

.nav-menu li a {
  color: white;
  text-decoration: none;
  padding-top: 47px;
  padding-bottom: 47px;
}

.nav-menu li a:hover{
  text-decoration: underline;
}

.mega-menu {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  background-color: lightblue;
  width: 100%;
  min-height: 250px;
  top: 128px;
  text-align: center;
}

/* .nav-menu:hover + .mega-menu {
  visibility: visible; 
  opacity: 1;
} */

.is-visible {
  visibility: visible; 
  opacity: 1;
}

.hide {
  display: none;
}
<div class="container">
  <ul class="nav-menu">
    <li class="nav-link">
      <a href="#">Navigation item</a>
    </li>
    <li class="nav-link">
      <a href="#">Navigation item</a>
    </li>
    <li class="nav-link">
      <a href="#">Navigation item</a>
    </li>
    <li class="nav-link">
      <a href="#">Navigation item</a>
    </li>
    <li class="nav-link">
      <a href="#">Navigation item</a>
    </li>
  </ul>

  <div class="mega-menu">
This mega menu is visible when a nav item is hovered on, or the mega menu itself is being hovered on. 

The problem I am facing is that when the user closes to the mega menu (by adding display: none) - future interactions no longer display the mega menu.
    <button class="close-btn-desktop">Close mega menu</button>
  </div>
</div>

希望这对你有帮助：）

赞(0）分享  回复(0）举报  2023-05-08
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com