unwrap list items in jquery based on controller va

问题:

I have two side menus. Each menu has subitems as list items under unordered list, like

 - FIRST MENU
    - Link one
    - Link two

 - SECOND MENU
    - Link three
    - Link four

When page loads I want to open one menu and other menu list items should stayed unwrapped like

- FIRST MENU
    - Link one
    - Link two

 - SECOND MENU

I have working example with FIRST MENU unwrapped here but I do need example with unwrapped SECOND MENU so I can change it to dynamic value sent from my controller.

var unwrapped_menu = $data_sent_from_controller; if data_sent_from_controller == "SECOND MENU" then unwrapped second menu.

Changed this example here to hardcoded SECOND MENU unwrapped would be perfect. Nothing more.

If you need more info please ask.

回答1:

If the dynamic value sent from the controller is the index (starting from 0) of the menu to be opened then:

JSFIDDLE

dynamic_value_from_controller = 1;

$(document).ready(function() {
    $.easing.def = "easeOutBounce";

    var menus = $( 'div.menu ul li.submenu' ),
        current_submenu = null;
    menus.next().hide();
    menus.each( function(i){
        var dropdown = $( this ).next(),
            title = $( 'a.title', this );
        title.click( function(e){
            if ( current_submenu !== null && current_submenu != dropdown )
            {
                current_submenu.slideUp( 'slow' );
            }
            current_submenu = dropdown;
            dropdown.stop(false, true).slideToggle('slow');
            e.preventDefault();
        } );
        if ( i == dynamic_value_from_controller )
            title.click();
    });
});

If the dynamic value is the text of the title then:

JSFIDDLE

dynamic_value_from_controller = 'SECOND MENU';

$(document).ready(function() {
    $.easing.def = "easeOutBounce";

    var menus = $( 'div.menu ul li.submenu' ),
        current_submenu = null;
    menus.next().hide();
    menus.each( function(i){
        var dropdown = $( this ).next(),
            title = $( 'a.title', this );
        title.click( function(e){
            if ( current_submenu !== null && current_submenu != dropdown )
            {
                current_submenu.slideUp( 'slow' );
            }
            current_submenu = dropdown;
            dropdown.stop(false, true).slideToggle('slow');
            e.preventDefault();
        } );
        if ( title.text() == dynamic_value_from_controller )
            title.click();
    });
});

回答2:

Have your controller output something on the submenu that you want to open, e.g. a data attribute, or a class name. Then your JS can trigger the submenu that has said attribute or class name to open.

Your list item that you want to open should look something like this:

<li id="second_menu" class="submenu" data-open-on-load="true">

... then in your js, instead of if( i==0 ) you can do something like this:

if ( $(this).attr("data-open-on-load") )
    title.click();

See example: http://jsfiddle.net/cWXm5/13/

Note that you'll need to have your controller output this on the first submenu when no others will be set to open, or none will open.