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

我有一个可折叠的ul li

它可以很好地用于第一级菜单，但它并没有扩展li第二级菜单中的ul元素

代码如下：

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

你可以检查小提琴

我尝试使用show，hide来简化代码

---

请勾选

如果您试图在第2层上用鼠标一次扩展整个第3层，您需要添加一个父选择器；你只是告诉我要展示这个李，但是在这个李里面你有ul。 因此，该选择器应在以下情况下工作：

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

整个代码：

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

---

还有一些基本的UI设计问题需要首先解决。您希望将孙辈项目放置在何处？在父母身边还是在父母下面？嵌套列表存在固有的z顺序问题。在它们的父列表下，将鼠标悬停在它们上后，这只是一个菜单系统吗？如果是这样的话，你最好使用许多可用的菜单插件中的一个。不，这已经存在，而且结构是这样的，ul内部的li需要适应这种变化，大多数菜单插件与嵌套的ul/LIs一起工作，所以这不是一个问题。你试过使用JSFIDLE吗。还有更多的问题需要解决：嘿，我正在尝试另一个版本使用显示隐藏，请看我的第二个代码块！！第二把小提琴。如果这是固定的，那么它将是可怕的

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