Question

我是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菜单隐藏在css中，而.visible类只是display:block;

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

感谢。

Answer 1

最简单的方法是删除active类<{1}}的{{1}}类{/ 1}}

sub-menu

Answer 2

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

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

Answer 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");
});

Answer 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/

我想改进jQuery导航

4 个答案: