在jquery效果上应用自定义操作

Question

我正在使用jquery easing effect，现在我有以下代码

$(document).ready(function() {
    $.easing.def = "easeOutBounce";
    $('#myDiv ul li.submenu a.title').click(function(e) {
       var dropDown = $(this).parent().next();
       $('.submenu_items').not(dropDown).slideUp('slow');
       dropDown.stop(false, true).slideToggle('slow');
       e.preventDefault();
    });
});

使用此js代码将解包#myDiv内无序列表中的所有列表项。我想要实现的是从我的控制器发送一些代表div标识符的字符串，因此代替#myDiv应该是从控制器发送的动态值。在该div下，所有项目都应该被解包，所有其他项目都应该被隐藏（包裹）。

• DivOne
  • 列表项
  • 列出第二项
• DivTwo
• DivThree

更新的问题

Dom结构正在关注

<!-- menu one  -->
<ul>
  <li id="first_menu" class="submenu">
    <a href="#" class="title">FIRST MENU</a>
  </li>
  <li class="submenu_items" style="display: list-item;">
   <ul class="nomargin"> 
     <li><a href="link1">LINK ONE</a>
       <ul>
         <li><a href="link2">LINK TWO</a></li>                                                                                
        </ul>
      </li> 
    </ul>    
  </ul>
<!-- / menu one -->


<!-- menu two -->
    <ul>
      <li id="second_menu" class="submenu">
        <a href="#" class="title">SECOND MENU</a>
      </li>
      <li class="submenu_items" style="display: list-item;">
       <ul class="nomargin"> 
         <li><a href="link3">LINK THREE</a>
           <ul>
             <li><a href="link4">LINK FOUR</a></li>                                                                                
            </ul>
          </li> 
        </ul>    
      </ul>
    <!-- / menu two -->

我想在页面加载时解开所有列表项目，让我们说第一个菜单，以及来自SECOND MENU的项目保持包装（这应该等待onclick事件，但现在不是问题）。

Answer 1

这是你所追求的效果：

JSFIDDLE

$(document).ready(function() {
    $.easing.def = "easeOutBounce";
    var submenus = $( '.submenu_items' );
    $( 'div.menu ul li.submenu' ).each( function(){
        var submenu  = $( this ),
            dropdown = submenu.next(),
            items    = submenus.not( dropdown );

        $( 'a.title', submenu ).click( function(e){
            items.slideUp( 'slow' );
            dropdown.stop(false, true).slideToggle('slow');
            e.preventDefault();
        } );
    });
});

单击标题后，其他div中的菜单项将被滑动并隐藏，当前子菜单将切换其子菜单。

修改

更有效的版本是：

JSFIDDLE

$(document).ready(function() {
    $.easing.def = "easeOutBounce";
    var current_submenu = null;
    $( 'div.menu ul li.submenu' ).each( function(){
        var dropdown = $( this ).next();
        $( 'a.title', this ).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();
        } );
    });
});

编辑2：

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

编辑3

在上一个编辑中添加了dynamic_value_from_controller变量，以控制最初打开的菜单。

JSFIDDLE