Question

我正在构建一个简单的下拉列表，如果UL存在，我想在父级中添加一个类：

HTML：

<ul id="menu">
  <li><a href="#">Parent 1</a></li>
  <li><a href="#">Parent 2</a>
    <ul>
      <li><a href="#">Sub 2.1</a></li>
      <li><a href="#">Sub 2.2</a></li>
    </ul>
  </li>
</ul>

所以我想：

最初隐藏所有嵌套的（ul#menu > li > ul）ul
在悬停时显示/隐藏嵌套ul
addClass“下拉”给有嵌套ul的

这不太合适，不确定原因：

$(function () {
    $("ul#menu li").hover(function () {
        $(this).addClass("hover");
        $('ul:first', this).css('visibility', 'visible');
    },
    function () {
        $(this).removeClass("hover");
        $('ul:first', this).css('visibility', 'hidden');
    });
    $("ul#menu li ul li:has(ul)").find("a:first").addClass("dropdown");
});

非常感谢你的帮助！

Answer 1

var ul = $('#menu');

if (ul.length) {
    ul.children('li').hover(function() {
        $(this).children('ul').show();
    }, function() {
        $(this).children('ul').hide();
    }).children('ul').hide().parent().addClass('dropdown');
}

演示：http://jsbin.com/ofayu

顺便说一句：您在标记中错误地关闭了<li>标记。

Answer 2

您写道：

$("ul#menu li ul li:has(ul)")

鉴于您的HTML结构，不应该是：

$("ul#menu li:has(ul)")

Answer 3

这个应该做的伎俩（未经测试）：

$('ul#menu > li > ul').each(function()
{
    var list = $(this);
    list.hide();
    list.parent().hover(list.hide, list.show);
    list.parent().parent().addClass('dropdown');
});

如果ul存在则添加addClass（jQuery）

3 个答案: