Correct slideToggle?

Question

JavaScript

Hello!
I am writing a fairly simple dropdown menu, I can not figure out how to make it work correctly.
Code:
jsfiddle.net/qz55hhde

Here's the problem:


When you click on another link, the first one doesn't collapse.

Don't kick too hard :) Thank you!

Answer 1

Firstly, your markup is not organized in the best way.

<ul class="menu">
    <li>
        <a href="#" class="parrent">item 1</a>
        <ul>
            <li>submenu item 1</li>
            <li>submenu item 1</li>
        </ul>
    </li>
    <li>
        <a href="#" class="parrent">item 2</a>
        <ul>
            <li>submenu item 2</li>
            <li>submenu item 2</li>
        </ul>
    </li>
    <li>
        <a href="#" class="parrent">item 3</a>
        <ul>
            <li>submenu item 3</li>
            <li>submenu item 3</li>
        </ul>
    </li>
</ul>

Well, JS:

$(function () {
    var links = $('.menu a.parrent');
    links.click(function (e) {
        links.not(this).siblings('ul').slideUp(300);
        $(this).siblings('ul').slideToggle(300);
    });
});

Sandbox example