jQuery：onClick if else 语句不起作用

Question

我有一个用于导航的 if/else 语句，当用户单击与 dropdown-toggle 类关联的链接时，会弹出一个子菜单。

dropdown-toggle 类在我们的导航中有多个链接。我只需要针对 1 个而不是全部，这就是我使用 .eq(0) 的原因。

当子菜单出现时，一个名为 open 的新类被注入到父级 <li>。

由于某种原因，我无法让这个if/else 语句完全发挥作用。我有前半部分工作，但没有下半部分。

对于else 部分，我尝试添加如果open 类被注入并添加active-nav-tab 类会发生什么。

active-nav-tab 是用户在当前页面时的状态类。 active-nav-tab 应该在用户仅单击当前页面的dropdown-toggle 以及在子菜单窗口外单击时消失。然后当用户点击带有dropdown-toggle 的导航链接时，active-nav-tab 应该再次出现在当前页面上。希望这是有道理的。我已经在这里待了两天了。

代码如下：

    $('.dropdown-toggle').click(function (e) {
        if ($(this).not('open')) {
        $('.dropdown-toggle').eq(0).removeClass('active-nav-tab');
        alert('test1');
        }
        else {
        $('.dropdown-toggle').eq(0).addClass('active-nav-tab');
        alert('test2');
    }
});

HTML

<li>
<a class="link dropdown-toggle active-nav-tab" role="button">
<span class="tab-icon icon-header-language"></span>
<span class="tab-text">Region</span>
</a>
</li>

<li class="open">
<a class="link dropdown-toggle" role="button">
<span class="tab-icon icon-header-language"></span>
<span class="tab-text">Region</span>
</a>
</li>

<li>
<a class="link dropdown-toggle" role="button">
<span class="tab-icon icon-header-language"></span>
<span class="tab-text">Region</span>
</a>
</li>

我不知道我到底错过了什么。任何帮助都将不胜感激。 谢谢！

Answer 1

您可以对代码进行的最快更改以获得您想要的行为是替换

if ($(this).not('open')) {

有

if ($('.dropdown-toggle').eq(0).hasClass('active-nav-tab')) {

但如果不知道您的用例或您有多少“下拉切换”元素，很难说这是否是一个完整的解决方案。

Answer 2

这将处理单击具有“下拉切换”类的第一个元素

$('.dropdown-toggle:first').click(function () {
    $(this).toggleClass("active-nav-tab");
    if ($(this).hasClass("active-nav-tab")) {
        alert ("Tab activated");
    } else {
        alert ("Tab deactivated");
    }
}

jQuery 函数 not(selector) 也应该用于枚举对象以过滤它。

Answer 3

这似乎或多或少地解决了我的问题。我看看QA怎么说哈哈 谢谢！

    $('.active-nav-tab').click(function (e) {
        if ($(this).parents().hasClass("open")) {
        $(this).addClass('active-nav-tab');
        alert('activated');
        }
        else {
        $(this).removeClass('active-nav-tab');
        alert('deactivated');
    }
});