Question

在简单的jQuery上寻求帮助，以便在点击时关闭ul ul li项目。这是我的小提琴手..

<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>

Answer 1

我不太清楚你想要什么，但这就是我所理解的。

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

当你点击ul ul li时，ul ul已关闭，是吗？

示例jQuery：

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

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

Answer 2

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

Answer 3

由于您的菜单是仅限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;
}

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

我建议使用js完全重建节目并隐藏功能，并仅使用css进行样式/位置设置。我还建议你在菜单的每个级别使用类名和id，因为你可以更容易地解决单个元素。寻找.subItem总是比#menu ul ul li更好！

CSS下拉菜单 - 单击子项目关闭 - jQuery

3 个答案: