Javascript 对jquery效果应用自定义操作

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

$(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下，所有项目都应该取消包装，所有其他项目都应该隐藏（包装）

• 女主角
  • 列表项
  • 清单项目二
• 第二组
• 第三名

更新的问题

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 -->

---

我想在页面加载时打开第一个菜单中的所有列表项，第二个菜单中的项目保持包装状态（这应该等待单击事件，但现在不是问题所在）。

这就是您想要的效果：

单击标题时，其他div中的菜单项将向上滑动并隐藏，当前子菜单将切换其子菜单

编辑：

更有效的版本是：

编辑2:

编辑3

在上一次编辑中添加了来自_controller变量的

动态_value_，以控制最初打开的菜单

如果您试图创建自己的自定义动画/动作效果。。。阅读此博客实际上我不是，我只是尝试在页面加载时在动态divvalue下打开ul li项目。在示例HTML中没有
DIV
标记-我假设它们只是围绕菜单的每个外部
ul
标记（每个菜单的最后两个
UL
closing标签之间缺少
LI
closing标签）@MTO感谢您的时间，我用dom结构编辑了我的问题。更新并整理了一个JSFIDLE。太好了，还有一件事，首先加载一页\u菜单项应该打开。不幸的是，我只能投票并接受一次：）非常感谢。如何更改此示例以打开第二个菜单展开，而不是第一个菜单。我需要这个，因为我将使用从控制器发送的动态值。
$(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();
        } );
    });
});

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

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