Question

我有一个可折叠的ul li。

它适用于第一级，但它不会扩展ul（第二级菜单）中的li元素。

这是代码：

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

您可以查看小提琴here

我尝试使用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);

});

请检查this fiddle

Answer 1

如果你想在第2级鼠标悬停时扩展整个第3级，你需要添加父选择器;你只是在告诉他们如何展示＆＃34; li＆＃34;但在这个里面你有＆＃34; ul＆＃34;。因此，这个选择器应该工作：

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

fiddle

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

1 个答案: