CODEWITHSUNDEEP
javascriptjqueryhtml
Quesofat
Quesofat

Reputation: 1531

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

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!

Upvotes: 2

Views: 3119

Answers (2)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

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>

Upvotes: 2

D Lowther
D Lowther

Reputation: 1619

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"); }
  );
})

Upvotes: 2

Related Questions