Using if else statements and the .hover() method in jquery

Question

I have a dropdown menu that I have made to function much like a modal.

<div class="hidden-dropdown hide">
   <ul>
      <li><a>Blah</a></li>
      <li><a>Blah balh</a></li>
      <li><a>Blah</a></li>
   </ul>
</div>

and some jQuery for when I hover over the div OR the nav bar link that has an id to be able to be selected the dropdown menu appears.

jQuery:

$(document).ready(function() {
   if ( $("#kDropdown") || $(".hidden-dropdown").hover == true ) {
      $("#kDropdown").hover(function() {
              $(".hidden-dropdown").removeClass("hide");
      });
   } else {
      $(".hidden-dropdown").addClass("hide");
  }// end if
}); // document is ready

The code works fine to bring the dropdown menu into play by removing the "hide" class, but it doesn't work in removing it from sight.

What can I do to make the functionality work? All I need is the dropdown to appear when hovering over the navbar "#kDropdwon" and remove when it's not hovering over the navbar or the "hidden-dropdown" div.

Edit: added snippit of navar

<ul class="action-bar__menu--main action-bar__menu list--inline action-bar--show" id="SiteNav" role="navigation">
   <li class="action-bar__menu-item hide-for-small-only {% if childlink.active %}action-bar--active{% endif %}">
      <a href="{% if template == 'index' or template == 'page.index' %}#{% else %}https://domeha.com{% endif %}" class="action-bar__link">Home</a>
   </li>
   <li class="action-bar__menu-item hide-for-small-only {% if childlink.active %}action-bar--active{% endif %}">
      <a href="{% if template == 'collection' %}#{% else %}/collections/all{% endif %}" id="kDropdown" class="action-bar__link">Products</a>
   </li>

Thank you!

use .hidden-dropdown not #hidden-dropdown

m87
– m87

2017-02-16 16:38:37 +00:00
Commented Feb 16, 2017 at 16:38 — m87
– m87, Commented Feb 16, 2017 at 16:38

D Lowther · Accepted Answer · 2017-02-16 16:42:26Z

2

Hover can take a handler in as well as handler out parameter so the simplest solution would be:

$(document).ready(function() {
  // question about kDropdown, where is this since it isn't in the code snippet?
  $('#kDropdown').hover(
  function() { $(".hidden-dropdown").removeClass("hide"); },
  function() { $(".hidden-dropdown").addClass("hide"); }
  );
})

answered Feb 16, 2017 at 16:42

D Lowther

1,6191 gold badge10 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Quesofat Over a year ago

I added kDropdown

Quesofat Over a year ago

The templating engine is liquid

Zakaria Acharki · Accepted Answer · 2017-02-16 16:49:56Z

2

The div has no id so you should use class .hidden-dropdown instead :

$("#hidden-dropdown").addClass("hide");
___^

Should be :

$(".hidden-dropdown").addClass("hide");
___^

Hope this helps.

$(document).ready(function() {
  $( "li" ).hover(
    function() {
       $(".hidden-dropdown").removeClass("hide");
    }, function() {
       $(".hidden-dropdown").addClass("hide");
    }
  );
}); // document is ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>

<ul class="action-bar__menu--main action-bar__menu list--inline action-bar--show" id="SiteNav" role="navigation">
  <li class="action-bar__menu-item hide-for-small-only {% if childlink.active %}action-bar--active{% endif %}">
    <a href="{% if template == 'index' or template == 'page.index' %}#{% else %}https://domeha.com{% endif %}" class="action-bar__link">Home</a>
  </li>
  <li class="action-bar__menu-item hide-for-small-only {% if childlink.active %}action-bar--active{% endif %}">
    <a href="{% if template == 'collection' %}#{% else %}/collections/all{% endif %}" id="kDropdown" class="action-bar__link">Products</a>
  </li>
</ul>

<div class="hidden-dropdown hide">
   <ul>
      <li><a>Blah</a></li>
      <li><a>Blah balh</a></li>
      <li><a>Blah</a></li>
   </ul>
</div>

edited Feb 16, 2017 at 16:49

answered Feb 16, 2017 at 16:36

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

4 Comments

Quesofat Over a year ago

Unfortunately, that didn't fix the issue.

Zakaria Acharki Over a year ago

Ok please add all the relevant code, i can't find kDropdown in the OP.

Quesofat Over a year ago

It has been added.

Quesofat Over a year ago

+1 Both answers were correct however D Lowther beat you to the punch for a working solution. Thank you for your help!

Collectives™ on Stack Overflow

Using if else statements and the .hover() method in jquery

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related