Question

下面的标记是动态生成的菜单的示例，该菜单使用css作为弹出框设置样式。我只是想添加箭头来显示菜单中有子菜单的位置。

是否有可能通过jQuery将一个类（“hasChild top”）添加到具有子菜单的顶级元素和一个类（“hasChild sub”）到具有子元素的低级元素？

<ul id="menu-site-menu">
    <li"><a href="#">About Us</a>
        <ul class="sub-menu">
            <li><a href="#">Our Charity Partners</a></li>
            <li><a href="#">Privacy Policy</a></li>
        </ul>
    </li>
    <li><a href="#">Buy Apparel</a>
        <ul class="sub-menu">
            <li><a href="#">Benevolent Elephant</a>
                <ul class="sub-menu">
                    <li><a href="#">Benevolent Elephant Short Sleeve</a></li>
                    <li><a href="#">Benevolent Elephant Long Sleeve</a></li>
                </ul>
            </li>
            <li><a href="#">Eagle-Spirit</a>
                <ul class="sub-menu">
                    <li><a href="#">Eagle-Spirit Short Sleeve</a></li>
                    <li><a href="#">Eagle-Spirit Long Sleeve T-Shirts</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Customer Service</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

因此。在这个例子中，jQuery会将“hasChild top”类添加到“About Us”和“Buy Apparel”

它会将“hasChild sub”类添加到“Benevolent Elephant”和“Eagle Spirit”中

Answer 1

var topLevel = $("ul.nav.menu > li").has("ul");
topLevel.addClass("hasChild top");
topLevel.find("li").has("ul").addClass("hasChild sub");

也就是说，找到作为顶级ul的直接后代的li元素，然后使用.has()将其缩小到仅包含子ul的那些元素。给他们“hasChild顶级”课程。然后，在那些顶级的内部使用.find()与.has()结合使用以获得所有较低级菜单（无论嵌套程度如何）并为其提供“hasChild sub”类。

Answer 2

这样的事可能会很好。

$('ul.nav.menu > li').each(function (index) {
    if ($(this).find('ul').length > 0) $(this).addClass('hasChild').addClass('top');
});

$('ul.nav.menu > li > ul > li').each(function (index) {
    if ($(this).find('ul').length > 0) $(this).addClass('hasChild').addClass('sub');
});

Answer 3

$('ul.nav.menu > li > ul > li').each(function { 
    if ($(this).find('ul').length > 0) $(this).addClass('hasChild').addClass('sub'); 
    else 
     $(this).closest('li').addClass('hasChild').addClass('top'); 

});

Answer 4

不确定它是否是最好的jquery，但这应该可以解决问题：

  $('.menu > li').each(function() {
        var childMenu = $(this).find('ul');
        if (childMenu.length > 0) {
            $(this).addClass('hasChild top');

            var subMenuChild = $('.hasChild.top > ul > li');
            $(subMenuChild).each(function() {
                var subMenuChildMenu = $(this).find('ul');
                if (subMenuChildMenu.length > 0) {
                    $(this).addClass('hasChild sub');
                }
            });
        }
    });

Answer 5

我遇到了类似的问题，我想我的答案就在这里。

首先，我有一个弹出式嵌套列表，从托管服务中输出为.hasChildren。所以，我只能在UL中添加类，这些工作正常。

我要做的是。将span类添加到.hasChildren（不添加类）我已经尝试了上面的一些代码，并且它继续将span类附加到列表的末尾 - 请参阅下面我想要以粗体显示的内容。

最初我是这样做的

$(document).ready(function()
{
$('li.hasChildren a').first().append('<span class="arrow"></span>');

$（'ul ul li.hasChildren a'）。first（）。append（''）; }）;

它有效，但我有嵌套列表，有些列表会在不同时间有多个嵌套，因为网站可以在CMS的管理员中动态添加页面 - 所以我不能只使用.first

这就是我想要实现的目标

<li class="hasChildren"><a href="/about-us" class="">About Us<span class="arrow"></span></a></li>

以下是来自CMS的输出代码：

<ul class="globalMenu sf-menu responsive-menu sf-js-enabled">
   <li class="selectedPage"><a href="/" class="selectedPage">Home</a></li>
   <li class="hasChildren"><a href="/about-us" class="">About Us</a>
         <ul class="level2" style="display: none;">
                 <li><a href="/our-team">Our Team</a></li>
                 <li class="hasChildren"><a href="/campaigns" class="">Campaigns</a>
                          <ul class="level3" style="display: none;">
                                   <li><a href="/beat-poverty">Beat Poverty</a></li>
                         </ul>
                  </li>
          </ul>
    </li>
<li><a href="/events">Events</a></li>
<li><a href="/how-to-help">how to help</a></li>

P.S。我喜欢页面结构可以随时更改的长度。 CK

更新：

通过以上所有代码，这就是我提出的工作原理。唯一可能是好的方法是通过所有嵌套列表计算，而不是为每个列表添加另一个（或用逗号分隔）。让我知道是否有更简单的方法，或者这是我最简单的方法。

$('ul.globalMenu > li.hasChildren > a').append('<span class="arrow"></span>');

$（'ul.globalMenu＆gt; li.hasChildren ul li.hasChildren＆gt; a'）。append（''）;

jQuery动态地将类添加到嵌套列表项以标记具有子节点的菜单

5 个答案: