使用ul li的二级菜单项不起作用

Question

I have a collapsible ul li .

It works fine for the first level, but it is not expanding the ul elements inside the li (second level menu).

This is the code:

$(document).ready(function () {
    $("li").slideUp();
});

var hovering = 0;
var element;
$("ul,li").mouseenter(function(e) {
    setTimeout(function() { clearHover(); }, 1000);
    if (hovering == 0)
    {
        hovering = 1;
        $("#testdiv").css({ "background-color": "red" });
        $(this).find("> li").delay(500).slideDown("medium");
        $(".nav").not(this).find("li").delay(500).slideUp();
    }
});

function clearHover() {
    hovering = 0;
    $("#testdiv").css({ "background-color": "green" });
};

You can check the fiddle here

I tried to simplify the code using show, hide

 $(document).ready(function () {
     $("li").slideUp();
     // setTimeout(function(){ $("ul li").slideDown(); },1000);
 });


 $("ul").hover(function (e) {
     $(this).children().stop(true,true).show();
     $(".nav").not(this).find("li").stop(true,true).hide();
});

 $("li").hover(function (e) {
     if($(this).children().length>0){
     $(this).children().show();
         $(this).children("ul").css({"z-index":"100"});
     }
     //console.log($(this).children().length+ " " + Math.random);

});

Please check this fiddle

Answer 1

If you seek to expand the whole 3rd level once on mouse over on the level 2, you need to add a parent selector; you are just telling to show the "li" but inside this li you have "ul". Therefor, this selector should work:

  $(this).find("ul > li").delay(500).slideDown("medium");

The whole code:

  $(document).ready(function () {
      $("li").slideUp();
  });

 var hovering=0;
 var element;
 $("ul,li").mouseenter(function (e) {
setTimeout(function(){clearHover();},1000);
if(hovering==0)
{
     hovering=1;
    $("#testdiv").css({"background-color":"red"});
     $(this).find("> li").delay(500).slideDown("medium");
     $(this).find("ul > li").delay(500).slideDown("medium");


     $(".nav").not(this).find("li").delay(500).slideUp();
     $(".nav").not(this).find("li ul").delay(500).slideUp();
   }
 });


function clearHover(){

hovering=0;
    $("#testdiv").css({"background-color":"green"});
};

And the fiddle