CODEWITHSUNDEEP
javascriptjqueryhtmldrop-down-menu
Tudor
Tudor

Reputation: 37

Only one dropdown open at a time

I am a noob but I'm trying to learn js. Been toying around with this menu but I have been having trouble with an issue: using my code, how do I implement the behaviour of only having one dropdown open at a time, on mobile?

$(".menu > ul > li").click(function () {
    if ($(window).width() <= 943) {
        $(this).children("ul").fadeToggle(150);
    }
});

This is a demo of my code: http://jsbin.com/sesuda/edit?html,output

The way this template works is it keeps all the dropdowns open.

What I have tried: using not(this) to only open the clicked dropdown item. Also, using next(element) to only make the very next sibling (the dropdown content next to the dropdown link) visible.

Any help would be greatly appreciated. Disclaimer: sorry for the broken English, it's not my native language and I haven't slept for 24h.

Thank you.

Upvotes: 0

Views: 1009

Answers (2)

Martin Hučko
Martin Hučko

Reputation: 791

You should fade out all elements, and then fade in clicked one

$(".menu > ul > li").click(function () {
    if ($(window).width() <= 943) {
        $(".menu > ul > li > ul").fadeOut(150);
        $(this).children("ul").fadeToggle(150);
    }
});

Upvotes: 1

Djonne Snough
Djonne Snough

Reputation: 13

It works correctly for me (Firefox 47). But I noticed you have a .click listener as well as a .hover listener. These might be interfering with eachother.

Upvotes: 0

Related Questions