jquery 토글/아코디언 효과와 통합 된 표시/숨기기

Question

여러 인스턴스에서 잘 작동하는 표시/숨기기 전환 기능이 있습니다. ('jquery 토글을 여러 인스턴스에서 작동'으로 검색하면 도움이됩니다.)

기본 카테고리에 확장 메뉴/아코디언 스타일로 통합하고 싶습니다. 스크립트가 있고 자체적으로 작동하지만 표시/숨기기 기능과 통합되어 작동하지 않습니다.

작업 표시/숨기기 : http://pastebin.me/c69869d7a80fdb439ca16304b821c146

내가 통합하려는 확장 메뉴 스크립트 http://pastebin.me/03b685f586fef84193b5fd72e815255d

Answer 1

을 나는 이 조금 정확하게 당신이 후, 그래서하지 확신 추측과 빠른 rought 컷의 최적화를 필요로하지만 작동합니다 :

jQuery.fn.expandingMenu = function(options) { 
    settings = jQuery.extend({ 
    speed: 500, 
    show: 10, 
    hideCaption: 'Hide', 
    showCaption: 'More' 
    }, options); 

    if (this.children('.active').length) return this; 

    this.each(function() { 
    if ($(this).children().slice(settings.show).hide().length) { 
     $(this).append($('<li class="toggler">' + settings.showCaption + '</li>').toggle(function() { 
      $(this).text(settings.hideCaption).siblings().slideDown(settings.speed); 
     }, function() { 
      $(this).text(settings.showCaption).siblings().slice(settings.show + 1).slideUp(settings.speed); 
     })); 
    } 

    $(this).children().hide().first().show().css({cursor:"pointer"}).toggle(function() { 
     $(this).siblings().slice(0, settings.show).add($(this).siblings('.toggler')).show(settings.speed); 
    }, function() { 
     $(this).siblings().hide(settings.speed); 
    }); 
    }); 
    return this; 
}; 

$(function() { 
    $('ul').expandingMenu({ speed: 200, showCaption: "Gimme More" });  
}); 

See it in action here. 이 예는 플러그인 모델이되므로 위의 예제와 마찬가지로 $('ul').expandingMenu() (및 연결)을 호출하여 속도, 표시 할 수 및 숨기기/표시 캡션에 대한 옵션을 표시 할 수 있습니다. 한 부분을 들여다 보아 어느 부분이 옳지 않은지, 거기에서 쉽게 조정할 수 있는지 말해주십시오.