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应该获得该类，因为它有子级。这使链接在某些时候被禁用，因为他们没有响应点击事件，我可以转到href获取这些链接。我怎么能防止这种行为？有任何帮助或建议吗？

您可以对其进行测试here是滑块上方AloMiCuba.com文本后面的主菜单。

编辑：我需要什么

将原始来源（帖子中的第一个HTML）作为输入：

检查ul.nav navbar-nav导航栏右侧每个LI上的当前课程（如果已找到）（应该是一次），然后将其更改为active
检查has_children类以及当前LI是否具有UL内部li.last has_children has_current然后删除该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

<强>要求：



检查ul.nav navbar-nav navbar-right上每个LI的当前类，如果找到（应该是一次），然后将其更改为   活性



检查has_children类，如果当前LI内部有UL，如li.last has_children has_current，则删除所有类   在那个LI上添加下拉列表。

如果我明白你可能会想要这个：

$('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的直接后果1}}）到li.active然后只需将.find('li.current')更改为.find(' > li.current')。 An Example

更新：根据以下评论：

根据您的代码，我添加了一些额外的代码，因为我想删除来自LI的其余部分的has_children但是我的代码失败了不会删除该类，否则代码将完全按照我的要求运行

$('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

防止没有孩子UL的LI上的“开放”课程

1 个答案: