CODEWITHSUNDEEP
javascriptjqueryhtmlcssdrop-down-menu
user3184347
user3184347

Reputation: 15

On-click drop-down nav menu (part 2)

I have made a topic about this in this link.

I have explain everything in that topic.

I have look around at stackoverflow, trying to find ideas of this and I kinda did.

I have played around with some code and JavaScript I found.

HTML:

<div class="sort-list-menu-dropdown">
<span class="list-sort-title">Columns:</span>
<ul class="list-menu">
    <li class="default-sort-menu">
        4
        <ul class="sort-list">
            <li>4</li>
            <li>8</li>
        </ul>
    </li>
</ul>

CSS:

ul.sort-list { display: none; }

JS:

$("ul.list-menu > li.sort-menu").click(function () {
   $(this).find("ul").toggle();
});

The JavaScript does work but when you duplicate them with the same id called sort-list-menu-dropdown and when you click the first text called "4", it will bring up the menu called sort-list But this is where it messes up. When you dubplicate this, then when you click the first menu text called "4", it will bring it up but when you click the second menu, the first menu don't hide.

If anybody knows how to achieve this, it will be helpful to me.

Upvotes: 1

Views: 76

Answers (3)

chrisjordanme
chrisjordanme

Reputation: 612

It's probably the byproduct of copying/pasting code but make sure you are closing your div. But you probably don't actually need that div.

As Felix pointed out, you need default-sort-menu as opposed to .sort-menu

And finally, toggling the class should work just fine for what you want to do.

See http://jsfiddle.net/thechrisjordan/sx73T/1/

$('ul.list-menu > li.default-sort-menu').click(function () {
   $(this).find('ul').toggleClass('sort-list');
});

Upvotes: 0

Felix
Felix

Reputation: 38112

Firstly, you need to change .sort-menu to .default-sort-menu since it's the correct class name.

Secondly, when click on a list item to show the submenu belongs to that ul.sort-list, you can just hide other submenu from other ul.sort-list 

$("ul.list-menu > li.default-sort-menu").click(function () {
    $("ul.sort-list").hide();
   $(this).find("ul").toggle();
});

Fiddle Demo

Upvotes: 1

CRABOLO
CRABOLO

Reputation: 8793

Try adding $("ul.sort-list").hide(); This will hide all the elements matching ul.sort-list, but your next line will toggle the one that was clicked on and show it.

$("ul.list-menu > li.sort-menu").click(function () {
   $("ul.sort-list").hide();
   $(this).find("ul").toggle();
});

Upvotes: 1

Related Questions