悬停时Jquery toggleClass脚本出现问题

时间：2020-07-03 04:02:24

标签： javascript html jquery css frontend

我是社区的新手，在Web编程世界中也很新，这是让我发疯的问题，

当我将鼠标悬停在ul列表元素上时，我尝试使用此代码添加一个类，因此我可以显示nav元素，但是它不仅显示已悬停的下拉菜单，还显示了所有带有我选择的类的ul元素。 / p>

这是Jquery代码：

$(document).ready(function() {
  $("ul").hover(function() {
    $(this)
      .find(".dropdown-list")
      .toggleClass("dropdown-menu");
  });
});

这些是我的html文件中填充的元素：

<ul class="header-nav-responsive">
  <li><a href="index.html">HOME</a></li>
  <li>
    <a href="#">LAYOUT</a>
    <ul class="dropdown-list">
      <li><a href="#">Topbar</a></li>
      <li><a href="#">Header</a></li>
      <li><a href="#">Main Menu</a></li>
      <li><a href="#">Page Title</a></li>
      <li><a href="#">Page Menu</a></li>
      <li><a href="#">Sidebars</a></li>
      <li><a href="#">Footers</a></li>
      <li><a href="#">Options</a></li>
      <li><a href="#">Layout Demos</a></li>
    </ul>
  </li>
  <li>
    <a href="#">FEATURES</a>
    <ul class="dropdown-list">
      <li><a href="#">Topbar</a></li>
      <li><a href="#">Header</a></li>
      <li><a href="#">Main Menu</a></li>
      <li><a href="#">Page Title</a></li>
      <li><a href="#">Page Menu</a></li>
      <li><a href="#">Sidebars</a></li>
      <li><a href="#">Footers</a></li>
    </ul>
  </li>
  <li>
    <a href="#">ELEMENTS</a>
    <ul class="dropdown-list">
      <li><a href="#">Topbar</a></li>
      <li><a href="#">Header</a></li>
      <li><a href="#">Main Menu</a></li>
      <li><a href="#">Page Title</a></li>
      <li><a href="#">Page Menu</a></li>
      <li><a href="#">Sidebars</a></li>
      <li><a href="#">Footers</a></li>
    </ul>
  </li>
  <li>
    <a href="#">PAGES</a>
    <ul class="dropdown-list">
      <li><a href="#">Topbar</a></li>
      <li><a href="#">Header</a></li>
      <li><a href="#">Main Menu</a></li>
      <li><a href="#">Page Title</a></li>
      <li><a href="#">Page Menu</a></li>
      <li><a href="#">Sidebars</a></li>
      <li><a href="#">Footers</a></li>
    </ul>
  </li>
  <li>
    <a href="#">PORTFOLIO</a>
    <ul class="dropdown-list">
      <li><a href="#">Topbar</a></li>
      <li><a href="#">Header</a></li>
      <li><a href="#">Main Menu</a></li>
      <li><a href="#">Page Title</a></li>
      <li><a href="#">Page Menu</a></li>
      <li><a href="#">Sidebars</a></li>
      <li><a href="#">Footers</a></li>
    </ul>
  </li>
  <li>
    <a href="#">BLOG</a>
    <ul class="dropdown-list">
      <li><a href="#">Topbar</a></li>
      <li><a href="#">Header</a></li>
      <li><a href="#">Main Menu</a></li>
      <li><a href="#">Page Title</a></li>
      <li><a href="#">Page Menu</a></li>
      <li><a href="#">Sidebars</a></li>
      <li><a href="#">Footers</a></li>
    </ul>
  </li>
  <li>
    <a href="#">SHOP</a>
    <ul class="dropdown-list">
      <li><a href="#">Topbar</a></li>
      <li><a href="#">Header</a></li>
      <li><a href="#">Main Menu</a></li>
      <li><a href="#">Page Title</a></li>
      <li><a href="#">Page Menu</a></li>
      <li><a href="#">Sidebars</a></li>
      <li><a href="#">Footers</a></li>
    </ul>
  </li>
</ul>

这是CSS代码段：

.header-nav-responsive .dropdown-list {
    display: none;
}

.header-nav-responsive .dropdown-menu, .nav-icons-big-screen .dropdown-menu {
    flex-direction: column;
    position: absolute;
    align-items: flex-start;
    background-color: #fff;
    margin-top: 11rem;
    padding: 14px 20px;
    border-radius: 5px;
    display: none;
    visibility: hidden;
    border: 1px solid #e6e8eb;
    box-shadow: 0 14px 20px rgba(0,0,0,.1);
}

.header-nav-responsive .dropdown-menu {
    margin-top: -1.1rem;
}

.nav-icons-big-screen i {
    line-height: 80px;
}

.header-nav-responsive:hover .dropdown-menu, .nav-icons-big-screen:hover .dropdown-menu {
    display: flex;
    visibility: visible;
}

.header-nav-responsive .dropdown-menu li, .nav-icons-big-screen .dropdown-menu li {
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 25px;
}

.header-nav-responsive .dropdown-menu li a, .nav-icons-big-screen .dropdown-menu li a{
    color: #484848;
    padding: 3px 2px;
}

.header-nav-responsive .dropdown-menu li a:hover, .nav-icons-big-screen .dropdown-menu li a:hover {
    color:#2250fc;
    
}

最后，您可以看到页面在此链接中的显示方式：https://patricio1984.github.io/Polo-template-emulation/

非常感谢所有人！欢呼！

3 个答案:

答案 0 :(得分：1)

问题是因为您要将事件侦听器添加到ul标签（这也包括父ul）。相反，您应该有一个li的事件侦听器，使用类'menu-item'说，然后基于该类切换类。

$(document).ready(function(){
  $(".menu-item").hover(function(){
    $(this).find(".dropdown-list").toggleClass("dropdown-menu");
  });
});

这里是小提琴链接https://jsfiddle.net/eskcrd3n/

答案 1 :(得分：1)

实际上，您的问题在主选择器下。您确实去听了ul，而您应该听了li元素。因此，每当您收听ul时，$(this)都会引用<ul class="header-nav-responsive">，因此触发事件将调用所有dropdown-list类的元素。

$(document).ready(function() {
  $("li").hover(function() {
    $(this).find(".dropdown-list").toggleClass("dropdown-menu");
  });
});
.header-nav-responsive .dropdown-list {
  display: none;
}

.header-nav-responsive .dropdown-menu,
.nav-icons-big-screen .dropdown-menu {
  flex-direction: column;
  position: absolute;
  align-items: flex-start;
  background-color: #fff;
  margin-top: 11rem;
  padding: 14px 20px;
  border-radius: 5px;
  display: none;
  visibility: hidden;
  border: 1px solid #e6e8eb;
  box-shadow: 0 14px 20px rgba(0, 0, 0, .1);
}

.header-nav-responsive .dropdown-menu {
  margin-top: -1.1rem;
}

.nav-icons-big-screen i {
  line-height: 80px;
}

.header-nav-responsive:hover .dropdown-menu,
.nav-icons-big-screen:hover .dropdown-menu {
  display: flex;
  visibility: visible;
}

.header-nav-responsive .dropdown-menu li,
.nav-icons-big-screen .dropdown-menu li {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 25px;
}

.header-nav-responsive .dropdown-menu li a,
.nav-icons-big-screen .dropdown-menu li a {
  color: #484848;
  padding: 3px 2px;
}

.header-nav-responsive .dropdown-menu li a:hover,
.nav-icons-big-screen .dropdown-menu li a:hover {
  color: #2250fc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="header-nav-responsive">
  <li><a href="index.html">HOME</a></li>
  <li><a href="#">LAYOUT</a>
    <ul class="dropdown-list">
      <li><a href="#">Topbar</a></li>
      <li><a href="#">Header</a></li>
      <li><a href="#">Main Menu</a></li>
      <li><a href="#">Page Title</a></li>
      <li><a href="#">Page Menu</a></li>
      <li><a href="#">Sidebars</a></li>
      <li><a href="#">Footers</a></li>
      <li><a href="#">Options</a></li>
      <li><a href="#">Layout Demos</a></li>
    </ul>
  </li>
  <li><a href="#">FEATURES</a>
    <ul class="dropdown-list">
      <li><a href="#">Topbar</a></li>
      <li><a href="#">Header</a></li>
      <li><a href="#">Main Menu</a></li>
      <li><a href="#">Page Title</a></li>
      <li><a href="#">Page Menu</a></li>
      <li><a href="#">Sidebars</a></li>
      <li><a href="#">Footers</a></li>
    </ul>
  </li>
  <li><a href="#">ELEMENTS</a>
    <ul class="dropdown-list">
      <li><a href="#">Topbar</a></li>
      <li><a href="#">Header</a></li>
      <li><a href="#">Main Menu</a></li>
      <li><a href="#">Page Title</a></li>
      <li><a href="#">Page Menu</a></li>
      <li><a href="#">Sidebars</a></li>
      <li><a href="#">Footers</a></li>
    </ul>
  </li>
  <li><a href="#">PAGES</a>
    <ul class="dropdown-list">
      <li><a href="#">Topbar</a></li>
      <li><a href="#">Header</a></li>
      <li><a href="#">Main Menu</a></li>
      <li><a href="#">Page Title</a></li>
      <li><a href="#">Page Menu</a></li>
      <li><a href="#">Sidebars</a></li>
      <li><a href="#">Footers</a></li>
    </ul>
  </li>
  <li><a href="#">PORTFOLIO</a>
    <ul class="dropdown-list">
      <li><a href="#">Topbar</a></li>
      <li><a href="#">Header</a></li>
      <li><a href="#">Main Menu</a></li>
      <li><a href="#">Page Title</a></li>
      <li><a href="#">Page Menu</a></li>
      <li><a href="#">Sidebars</a></li>
      <li><a href="#">Footers</a></li>
    </ul>
  </li>
  <li><a href="#">BLOG</a>
    <ul class="dropdown-list">
      <li><a href="#">Topbar</a></li>
      <li><a href="#">Header</a></li>
      <li><a href="#">Main Menu</a></li>
      <li><a href="#">Page Title</a></li>
      <li><a href="#">Page Menu</a></li>
      <li><a href="#">Sidebars</a></li>
      <li><a href="#">Footers</a></li>
    </ul>
  </li>
  <li><a href="#">SHOP</a>
    <ul class="dropdown-list">
      <li><a href="#">Topbar</a></li>
      <li><a href="#">Header</a></li>
      <li><a href="#">Main Menu</a></li>
      <li><a href="#">Page Title</a></li>
      <li><a href="#">Page Menu</a></li>
      <li><a href="#">Sidebars</a></li>
      <li><a href="#">Footers</a></li>
    </ul>
  </li>
</ul>

注意：最好的方法是对菜单标题使用唯一的类，以避免任何不一致。

答案 2 :(得分：0)

非常感谢你们！！！ Jsfiddle给了我正确的主意，这是更正后的函数：

$(document).ready(function(){

  $(".menu-item").hover(function(){
    $(this).find(".dropdown-list").toggleClass("dropdown-menu");
  });
  
});

然后我将菜单项类添加到所有li项目中！

谢谢！！！问题解决了！那非常快=）

相关问题
最新问题