Question

我有两个侧边菜单。每个菜单都有子项作为无序列表下的列表项，如

 - FIRST MENU
    - Link one
    - Link two

 - SECOND MENU
    - Link three
    - Link four

当页面加载时我想打开一个菜单，其他菜单列表项应该保持打开状态像

- FIRST MENU
    - Link one
    - Link two

 - SECOND MENU

我有FIRST MENU解包here的工作示例，但我确实需要打开包装的SECOND MENU示例，以便我可以将其更改为从我的控制器发送的动态值。

var unwrapped_menu = $ data_sent_from_controller; 如果data_sent_from_controller ==“第二个菜单” 然后打开第二个菜单。

将此示例here更改为硬编码的SECOND MENU解包将非常完美。而已。

如果您需要更多信息，请询问。

Answer 1

如果从控制器发送的动态值是要打开的菜单的索引（从0开始），则：

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();
    });
});

如果动态值是标题的文本，则：

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();
    });
});

Answer 2

让您的控制器在您要打开的子菜单上输出内容，例如数据属性或类名。然后你的JS可以触发具有所述属性或类名的子菜单。

您要打开的列表项应如下所示：

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

...然后在你的js中，而不是if( i==0 )你可以做这样的事情：

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

参见示例：http://jsfiddle.net/cWXm5/13/

请注意，当没有其他人设置为打开时，您需要让控制器在第一个子菜单上输出此值，否则将无法打开。

根据控制器值在jquery中展开列表项

2 个答案: