CODEWITHSUNDEEP
jqueryhtmlcss
Amar Syla
Amar Syla

Reputation: 3663

I want to improve a jQuery navigation

I am a noob in jQuery, and I need help. I arrived to do a simple navigation, with this HTML code:

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

and I got this jQuery code:

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

The .sub-menu is hidden in css, and .visible class is just display:block;

It's working great, but I got a problem. If I click the first menu item, it opens the sub menu correctly. But if I click another item, it will open the submenu over the first sub menu. I have to click the submenu parent which I clicked earlier, to close it. I want it to be simplier, if a submenu is already opened, when I click another parent, it will first hide all the .sub-menus with the visible class, and than add the .visible class to that sub menu. I hope I am clear.

Thanks.

Upvotes: 1

Views: 95

Answers (4)

honzahommer
honzahommer

Reputation: 839

It's not clean solution, but it's what you need, I hope.

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

Upvotes: 0

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26163

You can't simply remove the visible class from all the elements, since you want to toggle it, so you need to remove it from everything but the menu item that's been clicked. That way you can still toggle a clicked menu item on and off.

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

Upvotes: 0

Maxim Kumpan
Maxim Kumpan

Reputation: 2635

Simple. Just add $('.sub-menu').removeClass('visible'); right before your show code. It will hide all the .sub-menu instances and show the needed one.

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

Upvotes: 1

hunter
hunter

Reputation: 63562

Easiest way would be to remove the active class of any sub-menu with the active class

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

Upvotes: 1

Related Questions