javascript - 防止 LI 上没有子 UL 的 "open"类

Question

我有这个用于构建菜单的 HTML:

原始 HTML:

---

<ul class="nav navbar-nav navbar-right">
    <li class="first has_children current"><a href="http://www.alomicuba.com/home">Inicio</a></li>
    <li class="has_children"><a href="http://www.alomicuba.com/content/rates">Tarifas</a></li>
    <li class="has_children"><a href="http://www.alomicuba.com/payment/buy">Recargas</a></li>
    <li class="has_children"><a href="http://www.alomicuba.com/access-number">Números de Acceso</a></li>
    <li class="has_children"><a href="http://www.alomicuba.com/contact">Contact</a></li>
    <li class="last has_children has_current"><a href="http://www.alomicuba.com/#">Ayuda</a>
        <ul class="dropdown">
            <li class="first has_children"><a 1="" href="http://www.alomicuba.com/how-it-works">Cómo funciona</a></li>
            <li class="last has_children current"><a 1="" href="http://www.alomicuba.com/">Llamar usando VoIIP</a></li>
        </ul>
    </li>
</ul>

然后我通过下面的 jQuery 代码对菜单进行了相同的 HTML 转换:

转换:

---

<ul class="nav navbar-nav">
    <li class="active"><a href="http://www.alomicuba.com/home">Inicio</a></li>
    <li class="dropdown"><a href="http://www.alomicuba.com/content/rates" data-close-others="true" data-hover="dropdown" data-toggle="dropdown" class="dropdown-toggle">Tarifas</a></li>
    <li class="dropdown"><a href="http://www.alomicuba.com/access-number" data-close-others="true" data-hover="dropdown" data-toggle="dropdown" class="dropdown-toggle">Números de Acceso</a></li>
    <li class="dropdown"><a href="http://www.alomicuba.com/contact" data-close-others="true" data-hover="dropdown" data-toggle="dropdown" class="dropdown-toggle">Contact</a></li>
    <li class="dropdown"><a href="http://www.alomicuba.com/#" data-close-others="true" data-hover="dropdown" data-toggle="dropdown" class="dropdown-toggle">Ayuda</a>
        <ul class="dropdown-menu">
            <li class="dropdown"><a 1="" href="http://www.alomicuba.com/how-it-works" data-close-others="true" data-hover="dropdown" data-toggle="dropdown" class="dropdown-toggle">Cómo funciona</a></li>
            <li class="active"><a 1="" href="http://www.alomicuba.com/">Llamar usando VoIIP</a></li>
        </ul>
    </li>
</ul>

我正在使用此 jQuery 代码在此 HTML 上设置一些值:

$("ul.nav li").each(function(index, element) {
    var $this = $(this),
    cls = '';
    if ($this.hasClass('current'))
    {
        cls = 'active';
    }
    else if ($this.hasClass('has_children'))
    {
        cls = 'dropdown';
        $this.children('.dropdown')
            .attr('class', 'dropdown-menu')
            .end()
            .children('a')
            .attr({
                'data-close-others': 'true',
                'data-hover': 'dropdown',
                'data-toggle': 'dropdown',
                'class': 'dropdown-toggle'
            });
    }
    $this.attr('class', cls);
}); 

出于某种原因，所有链接，甚至那些不需要它的人都得到了 open当我点击它们中的任何一个时。例如Tarifas , Números de Acceso (不需要 open 类)而 Ayuda应该上课，因为它有 child 。这使链接在某些时候被禁用，因为它们不响应点击事件，我可以转到 href对于那些链接。我怎样才能防止这种行为？有什么帮助或建议吗？

可以测试一下here是顶部的主菜单，就在AloMiCuba.com 后面 slider 上方的文本。

编辑:我需要的

将原始来源(帖子中的第一个 HTML)作为输入:

1. 检查 ul.nav navbar-nav navbar-right 上每个 LI 的当前类，如果找到(应该是一次)，然后将其更改为 active
2. 检查 has_children类，如果当前 LI 内部有 UL，如 li.last has_children has_current has 然后删除该 LI 上的所有类并添加 dropdown .

编辑:基于 WereWolf 代码

这是我一直在寻找的最终代码:

$('ul.nav')
      .find('li.current')
      .removeClass('current')
      .addClass('active')
      .end()
      .find('li.last')
      .removeClass('last')
      .end()
      .find('li.has_children:has("ul")')
      .children('.dropdown')
      .attr('class', 'dropdown-menu')
      .end()
      .children('a')
      .attr({
          'data-close-others': 'true',
          'data-hover': 'dropdown',
          'data-toggle': 'dropdown',
          'class': 'dropdown-toggle'
      })
      .find('li.has_children')
      .removeClass('has_children');

Answer 1

Requirements:

1. Check for current class on each LI on ul.nav navbar-nav navbar-right if it's found (should be one time) then change this to active.

2. Check for has_children class and if the current LI has UL inside like li.last has_children has_current has then remove all the classes on that LI and add dropdown.

如果我明白了，那么你可能想要这个:

$('ul.nav')
.find('li.current')
.removeClass('current')
.addClass('active')
.end()
.find('li.has_children:has("ul")')
.attr('class', 'dropdown');

现在你有两个 li 类为 current 的元素，所以两个都变成了 active 但如果你只想改变第一个 li.current(ul.nav 的直接继承者)到 li.active 然后只需更改 .find('li.current') 到 .find(' > li.current')。 An Example .

更新:根据以下评论:

based on your code I add some extra code since I'll like to remove has_children from the rest of LI but my code is failing since it doesn't remove the class otherwise the code works perfectly as I want

$('ul.nav')
.find('li.current')
.removeClass('current')
.addClass('active')
.end()
.find('li.has_children:has("ul")')
.attr('class', 'dropdown')
// Added new lines
.end()
.find('li.has_children')
.removeClass('has_children');

Example Here .