Question

我在选择正确的当前<ul> <li>选择器

方面遇到了一些麻烦

$('#menu > li').on('mouseover', function (e) {
    $(this).find("ul:first").show();
    $(this).find('> a').addClass('active');
}).on('mouseout', function (e) {
    $(this).find("ul:first").hide();
    $(this).find('> a').removeClass('active');
});

在上面的代码中，我可以找到<ul id="menu">及其<li>甚至是第一个<ul>

现在我想找到第一个<ul>所有孩子<ul>。就像在ul中找到ul一样，并在其中找到所有其他ul，直到带有图片的ul。

我刚刚添加了ID以供参考我不会使用该ID。

<ul id="menu" class="clearfix"> <li><a href="#">Categories</a>
    <li class="purple">    
        <a href="#">Design</a>
        <ul id="firstul">
            <li><a href="#">Photoshop</a>
                <ul>
                    <li>    
                        <a href="#"> Photoshop CS</a>
                        <ul>
                            <li><img src="m3.jpg" width="200"></li>
                        </ul>  
                    </li>
                </ul>
           </li>
        </ul>  
    </li>
</ul>

上述工作的{jsfiddle https://jsfiddle.net/neerajsonar/yLtzrLm9/

此外，我需要一个jQuery，因为它没有使用css选择器并且使用ul > li > ul这对我不起作用，否则我可能在尝试时使用它错误。

Answer 1

$（＆＃39; #nav .parent-item＆＃39;）。click（function（）{

    $(this).children('ul').slideToggle();
    return false;

});

演示：click here

Answer 2

好的，我做了一件事，但有一个我不理解的问题：

看看这里.. http://jsfiddle.net/yLtzrLm9/1/

我编辑你的小提琴，所以，现在：当鼠标进入＆＃34;类别＆＃34; （或者在具有像孩子一样的其他元素中）默认显示所有第一个ul。

...但是，如果您选择＆＃34;类别＆＃34; ＆GT; ＆＃34;设计＆＃34; ＆GT; ＆＃34;插图＆＃34; submenu fadeOut。但如果你在其他时间做同样的事情一切正常。我不知道为什么。试试吧。

我的改变：

使用mouseenter和mouseleave代替mouseover和mouseout来阻止您在导航菜单时调用双重处理程序。

添加一个新的类_selected，它显示li中的所有内容，当您导航到第一个类别时它将被放置，当您更改为不是第一个类别的其他子类别时将删除。 / p>

此：

if(!$(this).is(":first-child") || $(this).parents("li:first-child").length !== $(this).parents("li").length-1) $(this).parents("li").not("li li").removeClass("_selected");

是一个检查，以确定鼠标光标下方的元素是否可见，因为它位于第一个元素的流中。

很抱歉，但我的英语太糟糕了，而且很难解释。

Answer 3

使用Frogmouth的答案我做了一些改变。我添加了以下

$(this).find("ul > li:first > ul:first").show();
 $(this).find("ul > li:first > ul:first > li:first > ul:first").show();
 $(this).find("ul > li:first > ul:first > li:first > ul:first > li:first >ul:first").show();

children();无法正常工作，因为它会转到最里面的孩子，并试图显示父母未显示的位置。

我制作了一个根据子菜单项更改的超级菜单类型结构。小提琴https://jsfiddle.net/neerajsonar/4erto7c2/4/

jquery当前父子选择器

3 个答案:

我的改变：