1

我是 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 类添加到该子菜单。我希望我很清楚。

谢谢。

4

4 回答 4

1

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

$(".tab-link").click(function () {
    $(".tabs .sub-menu.visible").removeClass("visible");
    $(this).next().addClass("visible");
});
于 2013-09-10T13:35:50.270 回答
1

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

$(".tab-link").click(function () {
    $('.sub-menu').removeClass('visible');
    $(this).parent().find(".sub-menu").toggleClass("visible");
});
于 2013-09-10T13:36:58.740 回答
0

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

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

于 2013-09-10T13:44:27.003 回答
0

您不能简单地从所有元素中删除可见类，因为您想切换它，因此您需要从除已单击的菜单项之外的所有内容中删除它。这样，您仍然可以打开和关闭单击的菜单项。

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");
});
于 2013-09-10T13:38:05.870 回答