时间戳

首页 > 解决方案 > 如何将：悬停和单击事件同时添加到元素？

javascript - 如何将：悬停和单击事件同时添加到元素？

问题描述

当我悬停父元素时，他的孩子出现了。当我单击父元素时，他的孩子也会出现，当我再次单击它时，他的孩子会消失。但是然后（在单击父元素消失的孩子之后）当我悬停父元素时，他的孩子没有出现。为什么？

var parent = document.querySelector('nav > ul > li');
var children = document.querySelector('nav > ul > li > ul');

parent.addEventListener('click', function () {
  if (children.style.display == 'block') {
    children.style.display = 'none';
  } else {
    children.style.display = 'block';
  }
});
nav > ul > li > ul {
  display: none;
}

nav > ul > li:hover ul {
  display: block;
}

li {
  width: max-content;
}

ul {
  padding: 0px;
}
  <body>
    <nav>
      <ul>
        <li><a href="#">Parent</a>
          <ul>
            <li><a href="#">child</a></li>
            <li><a href="#">child</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </body>

谢谢。

标签： javascriptcsspseudo-classdom-events

解决方案

单击父级时更容易切换类。

var parent = document.querySelector('nav > ul > li');
var children = document.querySelector('nav > ul > li > ul');

parent.addEventListener('click', function() {
  children.classList.toggle("showIt");
});
nav>ul>li>ul {
  display: none;
}

nav>ul>li:hover ul {
  display: block;
}

li {
  width: max-content;
}

ul {
  padding: 0px;
}

.showIt {
  display: block;
}
<body>
  <nav>
    <ul>
      <li><a href="#">Parent</a>
        <ul>
          <li><a href="#">child</a></li>
          <li><a href="#">child</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</body>

推荐阅读