CODEWITHSUNDEEP
jquery
sdfkjfvfdijgvndfkj
sdfkjfvfdijgvndfkj

Reputation: 21

jQuery dropdown menu

I have a navbar, a ul with the id of menu that I want to turn into a dropdown menu. There are uls in each li, and each ul has the class sublist, which in the CSS has a display value of none, but with the jQuery below even though I hover over it, the ul won't show. I'm 12 and what is this?

        $(document).ready(function(){
            $('#menu li').hover(function(){
                $('.sublist').slideDown(200);
            });
        });

Upvotes: 2

Views: 1112

Answers (4)

Ausan Singh
Ausan Singh

Reputation: 1

Use the below code:

// Dropdown toggle fuction
$('.dropdown-toggle').click(function(){
  $(this).next('.dropdown').slideToggle("fast");
});
//Hide dropdown on page click
$(document).on('click', function (e) {
    if(!$(".dropdown-toggle").is(e.target) && !$(".dropdown-toggle").has(e.target).length){
        $('.dropdown').slideUp("fast");
    }                       
});

Upvotes: 0

Dejan Marjanović
Dejan Marjanović

Reputation: 19380

Try this.

$('#menu li').hover(function() {
  $(this).find('ul').stop(true, true).slideDown(200);
}, function() {
  $(this).find('ul').stop(true, true).slideUp(400);
});

Don't know if .sublist is ul though.

Upvotes: 1

David Thomas
David Thomas

Reputation: 253496

I'd suggest:

$(document).ready(
  function(){
    $('li').has('ul').hover(
      function(){
        $(this).find('ul').show();
      },
      function(){
        $(this).find('ul').hide();
      });
  });

Using has() (although you could, instead, use the :has() pseudo-selector) to identify the li elements with child ul elements.

Upvotes: 0

rahul
rahul

Reputation: 187110

Try something like

$(document).ready(function(){
    $('#menu li').hover(function(){
        $(this).find('ul.sublist').slideDown(200);
    },
    function(){
        $(this).find('ul.sublist').slideUp(200);
    });
});

Upvotes: 0

Related Questions