对 jquery 效果应用自定义操作

Applying custom action on jquery effect

本文关键字：自定义 操作 应用 jquery      更新时间：2024-01-26

我正在使用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 -->

我希望在页面加载时解开第一个菜单中的所有列表项，以及第二个菜单中的项目保持包装(这应该等待点击事件，但这不是现在的问题(。

这是你所追求的效果吗：

吉斯菲德尔

$(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 中的菜单项将向上滑动并隐藏，当前子菜单将切换其子菜单。

编辑：

一个更有效的版本是：

吉斯菲德尔

$(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：

吉斯菲德尔

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变量，以控制最初打开哪个菜单。

吉斯菲德尔

相关文章：