0

伙计们，我是 JavaScript/jQuery 菜鸟，现在我正在使用我最近购买的 Udemy 视频教程学习基础。到目前为止一切都很好（除了讲师认为学生已经具备很强的 OOP 知识？！）。不幸的是，我无法处理我的最后一项任务。我检查了两个多小时是否有错误，但从未发现它。这是我合并到一个文件中的代码，以便您更轻松地跟踪所有内容。目标是将鼠标悬停在“您已登录为：”链接上，然后出现隐藏菜单“我的帐户配置文件设置注销”。如果没有 jQuery，菜单就在原处，但显然 jQuery 代码中有问题。任何帮助都将被接受！

<!DOCTYPE html>
<html>
<head>

<style>
  h2 {
    display: inline-block;
  }

  .profile-menu {
    float:right;
    display: block;
    margin-top: 20px;
    margin-right: 20px;
    list-style-type: none;

  }

  .submenu {
    list-style-type: none;
    padding: 0px;
    border: 1px solid #aadd23;
    background: beige;
    margin-top: 10px;
    box-shadow: 7px 3px 5px rgba(0, 0, 0, .3);

    position: absolute;
    right: 10px;

    display: none;
  }

  .submenu.active {
    display: block;
  }

  .submenu a {
    text-decoration: none;
    padding: 10px 30px;
    display: block;
    color: #345;
    text-shadow: none;
    font-weight: 600;
    letter-spacing: 2px;
    width: 300px;
  }
  .submenu a:hover {
    background: #eee;
  }
</style>  

</head>
<body>

<h2>jQuery</h2>

<ul class="profile-menu">
   <li><a class="profile-menu-trigger" data-trigger="dropdown" href="#">You have logged in as:</a> 
   </li>
   <ul class="profile-submenu submenu">
          <li><a href="#">My account</a></li>
          <li><a href="#">Profile</a></li>
          <li><a href="#">Settings</a></li>
          <li><a href="#">Log out</a></li>
   </ul>
</ul>


<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() { <br>
  $('[data-trigger = "dropdown"]').on('mouseenter', function() { 
      var submenu = $(this).parent().find('.submenu');     
      submenu.addClass('active');                              

    } ); 
} );
</script>
</body>
</html>
4

1 回答 1

1

你必须使用.next()and not.find()因为你.submenu不是 li 的孩子，而是兄弟姐妹。

$(this).parent().next('.submenu');

笔记

<ul>永远不应该是另一个人的直系子女<ul>

演示

$(document).ready(function() {
    $('[data-trigger="dropdown"]').on('mouseenter', function() {
      var submenu = $(this).parent().next('.submenu');
      submenu.addClass('active');

    });
});
h2 {
  display: inline-block;
}

.profile-menu {
  float: right;
  display: block;
  margin-top: 20px;
  margin-right: 20px;
  list-style-type: none;
}

.submenu {
  list-style-type: none;
  padding: 0px;
  border: 1px solid #aadd23;
  background: beige;
  margin-top: 10px;
  box-shadow: 7px 3px 5px rgba(0, 0, 0, .3);
  position: absolute;
  right: 10px;
  display: none;
}

.submenu.active {
  display: block;
}

.submenu a {
  text-decoration: none;
  padding: 10px 30px;
  display: block;
  color: #345;
  text-shadow: none;
  font-weight: 600;
  letter-spacing: 2px;
  width: 300px;
}

.submenu a:hover {
  background: #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>jQuery</h2>

<ul class="profile-menu">
  <li><a class="profile-menu-trigger" data-trigger="dropdown" href="#">You have logged in as:</a>
  </li>
  <ul class="profile-submenu submenu">
    <li><a href="#">My account</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Log out</a></li>
  </ul>
</ul>

正确的html

$(document).ready(function() {
  $('[data-trigger="dropdown"]').on('mouseenter', function() {
    var submenu = $(this).next('.submenu');
    submenu.addClass('active');

  });
});
h2 {
  display: inline-block;
}

.profile-menu {
  float: right;
  display: block;
  margin-top: 20px;
  margin-right: 20px;
  list-style-type: none;
}

.submenu {
  list-style-type: none;
  padding: 0px;
  border: 1px solid #aadd23;
  background: beige;
  margin-top: 10px;
  box-shadow: 7px 3px 5px rgba(0, 0, 0, .3);
  position: absolute;
  right: 10px;
  display: none;
}

.submenu.active {
  display: block;
}

.submenu a {
  text-decoration: none;
  padding: 10px 30px;
  display: block;
  color: #345;
  text-shadow: none;
  font-weight: 600;
  letter-spacing: 2px;
  width: 300px;
}

.submenu a:hover {
  background: #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>jQuery</h2>

<ul class="profile-menu">
  <li><a class="profile-menu-trigger" data-trigger="dropdown" href="#">You have logged in as:</a>
    <ul class="profile-submenu submenu">
      <li><a href="#">My account</a></li>
      <li><a href="#">Profile</a></li>
      <li><a href="#">Settings</a></li>
      <li><a href="#">Log out</a></li>
    </ul>
  </li>

</ul>

于 2021-03-03T13:39:38.400 回答