CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
David
David

Reputation: 75

JQuery .hover slideDown slideUp working but ,click not working

I am using bootstrap 3 and I have a dropdown menu. Instead of using the default animation I have used a JQuery slideDown and slideUp. Only issue I am having is when I hover it works fine but when I click the menu it displays properly and slidesDown works, second click then slideUP works, then on the third click to check if will work again, there is no response. I have seen many examples and different methods but I am a novice and haven't had much luck.

Relevant Code that works:

$(document).ready(function () {
   $('.navbar-default .navbar-nav > li.dropdown').hover(function () {
      $('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
      $(this).addClass('open');
   }, function () {
      $('ul.dropdown-menu', this).stop(true, true).slideUp(100);
      $(this).removeClass('open');
   }); 
});

Relevant Code that does't work:

$(document).ready(function () {
   $('.navbar-default .navbar-nav > li.dropdown').click(function () {
      $('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
      $(this).addClass('open');
   }, function () {
      $('ul.dropdown-menu', this).stop(true, true).slideUp(100);
      $(this).removeClass('open');
   }); 
});

In the end I would like to add $('#target').on('click hover', function () { so if the user hovers over the menu and accidentally clicks, it closes the menu and they can reopen by either hovering over it again or clicking it open.

I'm not sure how to remove the hover function when clicking.

Upvotes: 0

Views: 742

Answers (2)

ArtBIT
ArtBIT

Reputation: 3989

Hover takes two functions as parameters: (http://api.jquery.com/hover/)

jQuery.hover(onHoverIn, onHoverOut);

Click only takes one. (http://api.jquery.com/click/)

You would need to do something like:

$(document).ready(function () {
   $('.navbar-default .navbar-nav > li.dropdown').click(function () {
      if ($(this).hasClass('open')) {
         $('ul.dropdown-menu', this).stop(true, true).slideUp(100);
         $(this).removeClass('open');
      } else {
         $('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
         $(this).addClass('open');
      }
   }); 
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

The click() method takes only one parameter as its argument. You can use slideToggle() and toggleClass()

$(document).ready(function () {
   $('.navbar-default .navbar-nav > li.dropdown').click(function () {
      $('ul.dropdown-menu', this).stop(true, true).slideToggle('fast');
      $(this).toggleClass('open');
   }); 
});

Upvotes: 4

Related Questions