CSS下拉菜单 - 儿童li项目关闭点击 - jQuery

寻找一个简单的jQuery的帮助来关闭点击上的ul ul li项目。这里是我的小提琴手..CSS下拉菜单 - 儿童li项目关闭点击 - jQuery

<div id='flyout_menu'> 
<ul> 
    <li onClick=”return true”><a href='#'><span>title</span></a> 
     <ul> 
       <li><a href='#'><span> sub title </span></a></li> 

     <li><a href='#'><span> sub title </span></a></li> 

<li><a href='#'><span>sub title</span></a></li> 


    </ul></li> 
</ul> 
</div>

来源

2014-09-11 user3682234

感谢您的输入，是不为我的请求，明确遗憾。你的解决方案奏效如果我希望父UI在单击时保持活动状态，还有一件事？谢谢！ – user3682234 2014-09-11 14:10:29

我没有很好地理解你想要什么，但这里是我的理解。

DEMO：http://jsfiddle.net/don/ux3vx1Lz/5/

当您点击UL UL李，在UL UL是封闭的，是什么？

样品的jQuery：

$('ul ul li').on('click', function() { 
    $(this).parent().hide(); 
}); 

$('ul li').on('mouseover', function() { 
    $(this).find('ul').show(); 
});

来源

2014-09-11 07:25:58

...以及用户将如何再次打开菜单？ – 2014-09-11 07:32:24

更新了代码（和演示）并添加了支持以在菜单悬停时再次显示。 – 2014-09-11 07:49:01

，因为你的菜单是一个CSS只菜单中，我们将继续保持这种方式。使用：主动选择器。只是改变你的提琴如下：

#flyout_menu ul ul, 
#flyout_menu ul:active{ //<-- this one is the new row, to hide the clicked ul 
    visibility: hidden; 
    position: absolute; 
    top: 0; 
    left: 80%; 
    z-index: 584598; 
}

这有一些缺点，但 - 这也触发，如果你点击主标题，导致主标题的闪烁......

我” d建议用js完全重建显示和隐藏功能，并仅使用css进行造型/定位。我也建议你在菜单的每个级别使用类名和id，因为你可以用这种方式更简单地解决单个元素。寻找.subItem总是比#menu ul ul li更好！

来源

2014-09-11 07:34:06 errand

不错的建议我会用类名重建ul subnav .. – user3682234 2014-09-11 14:10:50

JS：

$('ul ul li a').on('click', function() { 
    $(this).closest("ul").addClass("hidden"); 
}); 
$('ul li').on('mouseover', function() { 
    $(this).find('ul').removeClass("hidden"); 
});

CSS：

.hidden{ 
    display:none; 
}

Updated Fiddle

来源

2014-09-11 08:10:36

CSS下拉菜单 - 儿童li项目关闭点击 - jQuery

回答

相关问题