On-click drop-down nav menu

Question

I am making a column list with some drop-down menus and I needed the Jquery for the drop-down to make it work.

I have found some Jquery for this but the problem is when you have two menus with ul and li, like this. HTML:

<ul class="list-menu">
<li class="sort-menu">4</li>
    <div class="sort-list-dropdown">
         <ul class="sort-list">
             <li>4</li>
         </ul>
    </div>
</ul>

When you duplicate this two times and then when you click the 4 on the class that says sort-menu, it will put up two menus containers and that class is sort-list-dropdown I have been playing with JS I got from somewhere and I'm getting confused about this issue.

JavaScript:

    $("ul.list-menu > li").click(function () {
    var X = $(this).attr('id');
    if (X == 1) {
        $("ul.sort-list > li").hide();
        $(this).attr('id', '0');
    } else {
        $("ul.sort-list > li").show();
        $(this).attr('id', '1');
    }
});

//Mouse click on sub menu
$("ul.sort-list > li").mouseup(function () {
    return false;
});

//Mouse click on my account link
$("ul.list-menu > li").mouseup(function () {
    return false;
});


//Document Click
$(document).mouseup(function () {
    $("ul.sort-list > li").hide();
    $("ul.list-menu > li").attr('id', '');
});

I get some of the variables but I do not think it's the code. I think I need to input a new variable but I do not know what does it need for it.

If anybody knows how to accomplish this, then please reply back to me.

Answer 1

I have one answer for this problem. Please try this code below:

$(document).ready(function() {
     $('.sort-list-dropdown').hide();
     $('ul.list-menu li').click(function() {
            $(this).next('.sort-list-dropdown').toggle();
     });
});

In code 'click', you can change it to 'hover'.

Answer 2

Try something like this:

http://jsfiddle.net/SinisterSystems/bmwBr/5/

HTML:

<ul>

    <li class="sec">Heading One</li>
    <li><ul>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>

        <li class="sec">Heading Two</li>
        <li><ul>
            <li>Third</li>
            <li>Third</li>
            <li>Third</li>
        </ul></li>

    </ul></li>

    <li class="sec">Heading One</li>
    <li><ul>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
    </ul></li>

</ul>

JS:

$(function(){
    $('li.sec').on('click', function() {
        $(this).next('li').slideToggle();
    });
});

CSS:

ul li {
    list-style:none;
}
.sec {
    background:#efefef;
    padding:25px;
    font-size:24px;
}

Try something like this:

http://jsfiddle.net/SinisterSystems/bmwBr/5/