CODEWITHSUNDEEP
jquerycss
php2webdeveloper
php2webdeveloper

Reputation: 1

jQuery drop-down menu doesn't appear

guys, I'm JavaScript/jQuery rookie and now I'm learning the basis using a Udemy video tutorial, which I bought recently. Everything so far was good (except the lector thinks that the student already has a strong OOP knowledge?!). Unfortunately I can't handle my last task. I checked for more than two hours for an error and never found it. Here's the code which I merged into one file to make it easier for you to track everything. The goal is to hover the mouse on the link "You have logged in as:" and the hidden menu "My account Profile Settings Log out" to appear. Without jQuery the menu is on it's place, but obviously there's something wrong within the jQuery code. Any help will be accepted with great regard!

<!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>

Upvotes: 0

Views: 42

Answers (1)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

You have to use .next() and not .find() since your .submenu is not a child of the li, but a sibling.

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

Note

<ul> should never be a direct child of another <ul>

Demo

$(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>

Correct 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>

Upvotes: 1

Related Questions