我想改进一个 jQuery 导航答案

【问题标题】：I want to improve a jQuery navigation我想改进一个 jQuery 导航
【发布时间】：2013-09-10 21:44:27
【问题描述】：

我是 jQuery 的菜鸟，我需要帮助。我来做一个简单的导航，用这个 HTML 代码：

<div class="tabs">
    <div class="tab">
        <a class="tab-link" href="#">SPECS</a>
        <div class="sub-menu">
            <a href="#">Specs 1</a>
            <a href="#">Specs 2</a>
            <a href="#">Specs 3</a>
        </div>
    </div>
    <div class="tab">
        <a class="tab-link" href="#">GALLERY</a>
        <div class="sub-menu">
            <a href="#">Gallery 1</a>
            <a href="#">Gallery 2</a>
            <a href="#">Gallery 3</a>
        </div>
    </div>
    <div class="tab">
        <a class="tab-link" href="#">PROJECTS</a>
        <div class="sub-menu">
            <a href="#">Projects 1</a>
            <a href="#">Projects 2</a>
            <a href="#">Projects 3</a>
        </div>
    </div>
    <div class="tab">
        <a class="tab-link" href="#">CONTACT US</a>
        <div class="sub-menu">
            <a href="#">Contact 1</a>
            <a href="#">Contact 2</a>
            <a href="#">Contact 3</a>
        </div>
    </div>
</div>

我得到了这个 jQuery 代码：

$(".tab-link").click(function () {
    $(this).parent().find(".sub-menu").toggleClass("visible");
});

.sub-menu 隐藏在 css 中，.visible 类就是 display:block;

效果很好，但我遇到了问题。如果我单击第一个菜单项，它会正确打开子菜单。但是，如果我单击另一个项目，它将打开第一个子菜单上方的子菜单。我必须单击我之前单击的子菜单父级以将其关闭。我希望它更简单，如果已经打开了子菜单，当我单击另一个父级时，它将首先隐藏所有具有可见类的 .sub-menus，然后将 .visible 类添加到该子菜单。我希望我很清楚。

谢谢。

【问题讨论】：

标签： jquery html css

【解决方案1】：

最简单的方法是使用active 类删除任何sub-menu 的active 类

$(".tab-link").click(function () {
    $(".tabs .sub-menu.visible").removeClass("visible");
    $(this).next().addClass("visible");
});

【讨论】：

【解决方案2】：

简单。只需在您的节目代码之前添加$('.sub-menu').removeClass('visible');。它将隐藏所有 .sub-menu 实例并显示所需的实例。

$(".tab-link").click(function () {
    $('.sub-menu').removeClass('visible');
    $(this).parent().find(".sub-menu").toggleClass("visible");
});

【讨论】：

【解决方案3】：

你不能简单地从所有元素中删除可见类，因为你想切换它，所以你需要从所有元素中删除它但是被点击的菜单项。这样您仍然可以打开和关闭单击的菜单项。

http://jsfiddle.net/KYmcP/

$(".tab-link").click(function () {
    var $tab = $(this).closest(".tab");
    $(".tab").not($tab).find(".sub-menu").removeClass("visible");
    $(this).parent().find(".sub-menu").toggleClass("visible");
});

【讨论】：

【解决方案4】：

这不是干净的解决方案，但我希望它是您所需要的。

$('.tab-link').click(function () {
    var $subMenu = $(this).parent().find('.sub-menu');

    if($subMenu.hasClass('visible')) {
        $('.visible').removeClass('visible');
    } else {
        $('.visible').removeClass('visible');
        $subMenu.addClass('visible');
    }
});

http://jsfiddle.net/8CJDJ/1/

【讨论】：