CODEWITHSUNDEEP
javascriptjqueryhtmllist
user1360461
user1360461

Reputation:

Manage HTML list items with jQuery

A section of a HTML list I have:

<ul id="listMenu" style="list-style-type:none; margin-left:-50">
    <li> __Menu1
        <ul class="menuitems">
            <li>Item A1</li>
            <li>Item A2</li>
        </ul>
    </li>

    <li> __Menu2
        <ul class="menuitems">
            <li>Item B1</li>
            <li>Item B2</li>
        </ul>
    </li>

    <li> __Menu3
        <ul class="menuitems">
            <li>Item C1</li>
            <li>Item C2</li>
        </ul>
    </li>

    <li> __Menu4
        <ul class="menuitems">
            <li>Item D1</li>
            <li>Item D2</li>
        </ul>
    </li>
</ul>

My goal is to use jQuery in a separate js file to manage the list.

I managed to get the sublists to initially not show with:

$('ul:gt(1)').hide(); // Hide all submenus initially

But past that I really am at a loss with how to access each lists individual items. I know this is all probably simple but I just don't know how to get started and all the other info I've read for is more advanced than I know how. Any help would be appreciated

Upvotes: 2

Views: 1223

Answers (3)

Onur Topal
Onur Topal

Reputation: 3061

If I don t get it wrong you need this,

$(document).ready(function () { 
   $(".menuitems").hide(); // hide all sub lists
   $(".menuitems").first().show(); show first one

   //handle click event    
   $(".menuitems").parent().click(function () {
      $(this).find(".menuitems").toggle(); // toogle sub menu every click
   });

});

Upvotes: 0

irrelephant
irrelephant

Reputation: 4111

Try this:

$(document).ready(function() {
    $(".menuitems").hide();
    $(".menuitems").find("li").click(function(e) {
        $(this).parent().show();
        alert($(this).text());
        e.stopPropagation();
    });
    $(".menuitems").parent().click(function() {
        $(this).find(".menuitems").toggle();
    });
});

Meets all your specs, I think.

See http://jsfiddle.net/BfqhV/2/

Upvotes: 1

Riaan Walters
Riaan Walters

Reputation: 2676

Here you go, Coupled with your method, this will work a charm :)

    $(".menuitems").parent().click(function () {
        $(this).find("li").toggle();
    });
    $(".menuitems li").click(function () {
        var li_text_trimmed = $.trim($(this).text())
        alert(li_text_trimmed)
    })

Upvotes: 0

Related Questions