基于控制器值打开jquery中的列表项

unwrap list items in jquery based on controller value

本文关键字：列表 jquery 控制器      更新时间：2024-01-13

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

 - FIRST MENU
    - Link one
    - Link two
 - SECOND MENU
    - Link three
    - Link four

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

- FIRST MENU
    - Link one
    - Link two
 - SECOND MENU

我在这里有打开第一个菜单的工作示例，但我确实需要打开第二个菜单的示例，这样我就可以将其更改为从控制器发送的动态值

var unpacked_menu=$data_sent_from_controller；如果data_sent_from_controller="第二菜单"然后打开第二个菜单。

将此示例更改为硬编码的第二菜单展开将是完美的。没什么了。

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

如果控制器发送的动态值是要打开的菜单的索引（从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();
    });
});

让控制器在要打开的子菜单上输出一些内容，例如数据属性或类名。然后您的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/

请注意，当没有其他子菜单被设置为打开时，或者没有任何子菜单被打开时，您需要让控制器在第一个子菜单上输出此信息。

相关文章：