jQuery accordion slides up multiple times

Question

I'm making a jquery accordion and I have some issues

My jQuery searches for a ul inside a class and if it has a certain class it slides down, but it slides down as many times as the element ul exists in the whole nav

Here is my jquery code so far:

if($(this).has("ul").length){   
$(".menu ul li").on('click',function(e){
    $(this).addClass('open').siblings().removeClass('open').children();
    $('.menu ul li ul').slideUp();
    if($(this).parents().find(".open").length){
        $(this).children('ul').slideDown();
    }
    //$(this).parents().find(".open").children('ul').slideDown();
    e.preventDefault();
    }); 
};

this is my html:

  <div class="menu">
    <a id="jump" href="#"><p>Menu</p><span class="right">&#9660;</span></a>
    <nav class="row">
        <div class="page_wrapper">
        <ul class="niveau_1">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Group</a>
                <ul class="sub-menu">
                    <li><a href="#">QHSE/Awards</a></li>
                    <li><a href="#">Vacatures/</a></li>
                </ul>
            </li>
            <li><a href="#">Nieuws &amp; Media</a>
                <ul class="sub-menu">
                    <li><a href="#">Van Moer in de media</a></li>
                    <li><a href="#">Nieuwsarchief</a></li>
                </ul>
            </li>
            <li><a href="#">Sport &amp; Events</a>
                <ul class="sub-menu">
                    <li><a href="#">Casual Friday</a>
                        <ul>
                            <li><a href="#">Inschrijving</a></li>
                            <li><a href="#">Foto's</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Thursday Lounge</a></li>
                    <li><a href="#">Triatlon</a></li>
                    <li><a href="#">Sponsoring</a></li>
                    <li><a href="#">Beurzen</a></li>
                    <li><a href="#">Kalender</a></li>
                </ul>
            </li>
            <li><a href="#">Vestigingen</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        </div>

can you create a demo at http://jsfiddle.net/ , Why are u calling `$('.menu ul li ul').slideUp()` twice? — Arun P Johny, Feb 05 '13 at 08:46
couldn't create a jsfiddle, to complex css with mediaqueries and stuff — Wannes, Feb 05 '13 at 09:04
What should the class "open" do? I don't understand $(this).addClass('open').siblings().removeClass('open').children(); You're setting open to $(this) li, removing it from its siblings (always li) and then selecting ul without doing anything. Is "open" showing the li or something like that? That could be the problem since you're using slideDown after that. — Ciack404, Feb 05 '13 at 09:20

score 0 · Answer 1 · answered Feb 05 '13 at 08:50

just guessing sincei don't have HTML to look too... your problem is here in parents()

Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.

i think u need parent() here

Get the parent of each element in the current set of matched elements, optionally filtered by a selector.

if($(this).parent().find(".open").length){  //try this
    $(this).children('ul').slideDown();
}

note: it would be easy if you provide us with your HTML too

that's exactly the same as i have written, i've added the html — Wannes, Feb 05 '13 at 09:04

jQuery accordion slides up multiple times

1 Answers1