二级菜单项使用ul li不起作用 [英] Second level menu item using ul li not working

问题描述

我有一个可折叠的 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 （）; 
} 
}）; 
 
函数clearHover（）{
 hovering = 0; 
 $（＃testdiv）。css（{background-color：green}）; 
}; 
  

您可以检查小提琴 here

我尝试使用 show，hide

  $（document）.ready（function（）{
 $（li）。 ; 
 // setTimeout（function（）{$（ul li）。slideDown（）;}，1000）; 
}）; 
 
 $ b $（ul）。hover（function（e）{
 $（this）.children（）。stop（true，true）.show（）; 
 $（。nav）。not（this）.find（li）。stop（true，true）.hide（）; 
}）; 
 $ b $（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）; 
 
}）; 
  

请检查这个小提琴

解决方案

如果您试图在鼠标悬停时扩展整个第三级级别2，你需要添加一个父选择器;你只是告诉要显示李，但在这里你有ul。
因此，这个选择器应该可以工作：

$ $（this）.find（ul> li）。延迟（500）.slideDown（ 培养基）;

整个代码：

  $（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） ; 
 
 $ b $（。nav）。not（this）.find（li）。delay（500）.slideUp（）; 
 $（。 （500）.slideUp（）; 
} 
}）; 
 
 
 function clearHover（）{
 
 hovering = 0; 
 $（＃testdiv）。css（{background-color：green}）; 
}; 
  

而小提琴

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

解决方案

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

这篇关于二级菜单项使用ul li不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！