我在哪里可以找到jQuery手风琴式菜单（或者让它工作）？

我想在我的网站上实现一个手风琴风格的菜单。有一些要求：

• 它必须支持多个深度级别（至少3个）
• 它必须像手风琴一样工作
• 它必须提供有关用户所在位置的内容

此外，如果它支持他们，我会很高兴

我环顾四周，发现一些菜单与我要找的非常相似：

• 但是，在选择项目后，它仍会显示父菜单中的所有其他项目。而且，没有ThemeRoller支持
• ，将历史记录存储为面包屑，而不是菜单项
• ，不支持jQuery 1.8.2，并在展开包含子项的项后显示整个父容器的菜单项。而且，没有ThemeRoller支持

我真正想要的几乎就是MSDN库中的内容。 MSDN菜单是手风琴式的，它隐藏了所有不在当前级别/容器中的内容。它还将父项保留为“菜单项”，而不是面包屑

如果有人对这样的菜单有什么建议，我很乐意得到。否则，我想让DesignChemical深入菜单与jQuery1.8.2一起使用。我得到的错误相当模糊（从菜单附带的演示页面）：

错误来自jQuery库本身，第4679行

你知道我该怎么解决这个问题吗

---

我发现这个问题只存在于jQuery v1.8.0及更高版本，它仍然适用于v1.7.2。

jQuery.dcdrilldown.1.2.js文件中有一个bug（以及min版本）。简单地转到第103行并更换

var maxUl = $(objUl+'[rel="'+maxItems+'"]');

与

该菜单现在可以在jQuery v1.8.0及更高版本中使用

更新：

我做了更多的测试，发现如果根菜单的项目数最多，那么即使上面的修复也不会有帮助；还需要做一些其他的改变

首先，上述行需要：

var maxUl = objUl.parent().find('[rel=' + maxItems + ']');

第二，关于第184行

return maxIndex;

需要用以下代码替换：

if ($(element).find('li').length > maxIndex) {
//the longest 'submenu' could be the root menu
    return 1
} else {
    return maxIndex;
}

---

jquery.dcdrilldown.1.2.js文件（以及min版本）中有一个bug。简单地转到第103行并更换

var maxUl = $(objUl+'[rel="'+maxItems+'"]');

与

该菜单现在可以在jQuery v1.8.0及更高版本中使用

更新：

我做了更多的测试，发现如果根菜单的项目数最多，那么即使上面的修复也不会有帮助；还需要做一些其他的改变

首先，上述行需要：

var maxUl = objUl.parent().find('[rel=' + maxItems + ']');

第二，关于第184行

return maxIndex;

需要用以下代码替换：

if ($(element).find('li').length > maxIndex) {
//the longest 'submenu' could be the root menu
    return 1
} else {
    return maxIndex;
}

---

我知道这是一个有点老的思路，但考虑到cjbarth所指出的，我对代码做了更多的修改，现在它可以与最新的jquery 1.9.0库一起使用

希望这能帮助别人：）

jquery.dcdrilldown.1.2.1源代码

    /*

     * DC jQuery Drill Down Menu - jQuery drill down ipod menu
     * Copyright (c) 2011 Design Chemical
     * 
     * Patched for jQuery version 1.9.0
     * By Tay - StackOverflow
     * Dual licensed under the MIT and GPL licenses:
     *  http://www.opensource.org/licenses/mit-license.php
     *  http://www.gnu.org/licenses/gpl.html
     *
     */

    (function($){

    //define the new for the plugin ans how to call it
    $.fn.dcDrilldown = function(options) {

    //set default options
    var defaults = {
        classWrapper    : 'dd-wrapper',
        classMenu       : 'dd-menu',
        classParent     : 'dd-parent',
        classParentLink : 'dd-parent-a',
        classActive     : 'active',
        classHeader     : 'dd-header',
        eventType       : 'click',
        hoverDelay      : 300,
        speed           : 'slow',
        saveState       : true,
        showCount       : true,
        classCount      : 'dd-count',
        classIcon       : 'dd-icon',
        linkType        : 'backlink',
        resetText       : 'All',
        headerTag       : 'h3',
        defaultText     : 'Select Option',
        includeHdr      : true
    };

    //call in the default options
    var options = $.extend(defaults, options);

    //act upon the element that is passed into the design
    return this.each(function(options){

        var $dcDrilldownObj = this;
        $($dcDrilldownObj).addClass(defaults.classMenu);
        var $wrapper = '<div class="'+defaults.classWrapper+'" />';
        $($dcDrilldownObj).wrap($wrapper);
        var $dcWrapper = $($dcDrilldownObj).parent();
        var objIndex = $($dcWrapper).index('.'+defaults.classWrapper);
        var idHeader = defaults.classHeader+'-'+objIndex;
        var idWrapper = defaults.classWrapper+'-'+objIndex;
        $($dcWrapper).attr('id',idWrapper);
        var $header = '<div id="'+idHeader+'" class="'+defaults.classHeader+'"></div>';

        setUpDrilldown();

        if(defaults.saveState == true){
            var cookieId = defaults.classWrapper+'-'+objIndex;
            checkCookie(cookieId, $dcDrilldownObj);
        }

        resetDrilldown($dcDrilldownObj, $dcWrapper);

        $('li a',$dcDrilldownObj).click(function(e){

            $link = this;
            $activeLi = $(this).parent('li').stop();
            $siblingsLi = $($activeLi).siblings();

            // Drilldown action
            if($('> ul',$activeLi).length){
                if($($link).hasClass(defaults.classActive)){
                    $('ul a',$activeLi).removeClass(defaults.classActive);
                    resetDrilldown($dcDrilldownObj, $dcWrapper);
                } else {
                    actionDrillDown($activeLi, $dcWrapper, $dcDrilldownObj);
                }
            }

            // Prevent browsing to link if has child links
            if($(this).next('ul').length > 0){
                e.preventDefault();
            }
        });

        // Set up accordion
        function setUpDrilldown(){

            $arrow = '<span class="'+defaults.classIcon+'"></span>';
            $($dcDrilldownObj).before($header);

            // Get width of menu container & height of list item
            var totalWidth = $($dcDrilldownObj).outerWidth();
            totalWidth += 'px';
            var itemHeight = $('li',$dcDrilldownObj).outerHeight(true);

            // Get height of largest sub menu
            var objUl = $('ul',$dcDrilldownObj);
            var maxItems = findMaxHeight(objUl);

            // Get level of largest sub menu
            var maxUl = objUl.parent().find('[rel=' + maxItems + ']');
            var getIndex = findMaxIndex(maxUl);

            // Set menu container height
            if(defaults.linkType == 'link'){
                menuHeight = itemHeight * (maxItems + getIndex);
            } else {
                menuHeight = itemHeight * maxItems;
            }
            $($dcDrilldownObj).css({height: menuHeight+'px', width: totalWidth});

            // Set sub menu width and offset
            $('li',$dcDrilldownObj).each(function(){
                $(this).css({width: totalWidth});
                $('ul',this).css({width: totalWidth, marginRight: '-'+totalWidth, marginTop: '0'});
                if($('> ul',this).length){
                    $(this).addClass(defaults.classParent);
                    $('> a',this).addClass(defaults.classParentLink).append($arrow);
                    if(defaults.showCount == true){
                        var parentLink = $('a:not(.'+defaults.classParentLink+')',this);
                        var countParent = parseInt($(parentLink).length);
                        getCount = countParent;
                        $('> a',this).append(' <span class="'+defaults.classCount+'">('+getCount+')</span>');
                    }
                }
            });

            // Add css class
            $('ul',$dcWrapper).each(function(){
                $('li:last',this).addClass('last');
            });
            $('> ul > li:last',$dcWrapper).addClass('last');
            if(defaults.linkType == 'link'){
                $(objUl).css('top',itemHeight+'px');
            }
        }

        // Breadcrumbs
        $('#'+idHeader).on('click', 'a', function(e){
            if($(this).hasClass('link-back')){
                linkIndex = $('#'+idWrapper+' .'+defaults.classParentLink+'.active').length;
                linkIndex = linkIndex-2;
                $('a.'+defaults.classActive+':last', $dcDrilldownObj).removeClass(defaults.classActive);
            } else {
                // Get link index
                var linkIndex = parseInt($(this).index('#'+idHeader+' a'));
                if(linkIndex == 0){
                    $('a',$dcDrilldownObj).removeClass(defaults.classActive);
                } else {
                    // Select equivalent active link
                    linkIndex = linkIndex-1;
                    $('a.'+defaults.classActive+':gt('+linkIndex+')',$dcDrilldownObj).removeClass(defaults.classActive);
                }
            }
            resetDrilldown($dcDrilldownObj, $dcWrapper);
            e.preventDefault();
        });
    });

    function findMaxHeight(element){
        var maxIndex = undefined;
        $(element).each(function(){
            var val = parseInt($('> li',this).length);
            $(this).attr('rel',val);
            if (maxIndex === undefined || maxIndex < val){
                maxIndex = val;
            }
        });
        if ($(element).find('li').length > maxIndex) {
        //the longest 'submenu' could be the root menu
            return 1
        } else {
            return maxIndex;
        }
    }

    function findMaxIndex(element){
        var maxIndex = undefined;
        $(element).each(function(){
            var val = parseInt($(this).parents('li').length);
            if (maxIndex === undefined || maxIndex < val) {
                maxIndex = val;
            }
        });
        return maxIndex;
    }

    // Retrieve cookie value and set active items
    function checkCookie(cookieId, obj){
        var cookieVal = $.cookie(cookieId);
        if(cookieVal != null){
            // create array from cookie string
            var activeArray = cookieVal.split(',');
            $.each(activeArray, function(index,value){
                var $cookieLi = $('li:eq('+value+')',obj);
                $('> a',$cookieLi).addClass(defaults.classActive);
            });
        }
    }

    // Drill Down
    function actionDrillDown(element, wrapper, obj){
        // Declare header
        var $header = $('.'+defaults.classHeader, wrapper);

        // Get new breadcrumb and header text
        var getNewBreadcrumb = $('h3',$header).html();
        var getNewHeaderText = $('> a',element).html();

        // Add new breadcrumb
        if(defaults.linkType == 'breadcrumb'){
            if(!$('ul',$header).length){
                $($header).prepend('<ul></ul>');
            }
            if(getNewBreadcrumb == defaults.defaultText){
                $('ul',$header).append('<li><a href="#" class="first">'+defaults.resetText+'</a></li>');
            } else {
                $('ul',$header).append('<li><a href="#">'+getNewBreadcrumb+'</a></li>');
            }
        }
        if(defaults.linkType == 'backlink'){
            if(!$('a',$header).length){
                $($header).prepend('<a href="#" class="link-back">'+getNewBreadcrumb+'</a>');
            } else {
                $('.link-back',$header).html(getNewBreadcrumb);
            }
        }
        if(defaults.linkType == 'link'){
            if(!$('a',$header).length){
                $($header).prepend('<ul><li><a href="#" class="first">'+defaults.resetText+'</a></li></ul>');
            }
        }
        // Update header text
        updateHeader($header, getNewHeaderText);

        // declare child link
        var activeLink = $('> a',element);

        // add active class to link
        $(activeLink).addClass(defaults.classActive);
        $('> ul li',element).show();
        $('> ul',element).animate({"margin-right": 0}, defaults.speed);

        // Find all sibling items & hide
        var $siblingsLi = $(element).siblings();
        $($siblingsLi).hide();

        // If using breadcrumbs hide this element
        if(defaults.linkType != 'link'){
            $(activeLink).hide();
        }

        // Write cookie if save state is on
        if(defaults.saveState == true){
            var cookieId = $(wrapper).attr('id');
            createCookie(cookieId, obj);
        }
    }

    // Drill Up
    function actionDrillUp(element, obj, wrapper){
        // Declare header
        var $header = $('.'+defaults.classHeader, wrapper);

        var activeLink = $('> a',element);
        var checklength = $('.'+defaults.classActive, wrapper).length;
        var activeIndex = $(activeLink).index('.'+defaults.classActive, wrapper);

        // Get width of menu for animating right
        var totalWidth = $(obj).outerWidth(true);
        $('ul',element).css('margin-right',-totalWidth+'px');

        // Show all elements
        $(activeLink).addClass(defaults.classActive);
        $('> ul li',element).show();
        $('a',element).show();

        // Get new header text from clicked link
        var getNewHeaderText = $('> a',element).html();
        $('h3',$header).html(getNewHeaderText);

        if(defaults.linkType == 'breadcrumb'){
            var breadcrumbIndex = activeIndex-1;
            $('a:gt('+activeIndex+')',$header).remove();
        }
    }

    function updateHeader(obj, html){
        if(defaults.includeHdr == true){
            if($('h3',obj).length){
                $('h3',obj).html(html);
            } else {
                $(obj).append('<'+defaults.headerTag+'>'+html+'</'+defaults.headerTag+'>');
            }
        }
    }

    // Reset accordion using active links
    function resetDrilldown(obj, wrapper){
        var $header = $('.'+defaults.classHeader, wrapper);
        $('ul',$header).remove();
        $('a',$header).remove();
        $('li',obj).show();
        $('a',obj).show();
        var totalWidth = $(obj).outerWidth(true);
        if(defaults.linkType == "link"){
            if($('a.'+defaults.classActive+':last',obj).parent('li').length){
                var lastActive = $('a.'+defaults.classActive+':last',obj).parent('li');
                $('ul',lastActive).css('margin-right',-totalWidth+'px');
            }else {
            $('ul',obj).css('margin-right',-totalWidth+'px');
            }
        } else {
            $('ul',obj).css('margin-right',-totalWidth+'px');
        }
        updateHeader($header, defaults.defaultText);

        // Write cookie if save state is on
        if(defaults.saveState == true){
            var cookieId = $(wrapper).attr('id');
            createCookie(cookieId, obj);
        }

        $('a.'+defaults.classActive,obj).each(function(i){
            var $activeLi = $(this).parent('li').stop();
            actionDrillDown($activeLi, wrapper, obj);
        });
    }

    // Write cookie
    function createCookie(cookieId, obj){
        var activeIndex = [];
        // Create array of active items index value
        $('a.'+defaults.classActive,obj).each(function(i){
            var $arrayItem = $(this).parent('li');
            var itemIndex = $('li',obj).index($arrayItem);
                activeIndex.push(itemIndex);
            });
        // Store in cookie
        $.cookie(cookieId, activeIndex, { path: '/' });
    }
};
})(jQuery);

/*
*DC jQuery向下钻取菜单-jQuery向下钻取菜单
*版权所有（c）2011设计化学
* 
*为jQuery版本1.9.0修补
*由泰-斯塔克沃夫酒店
*MIT和GPL许可下的双重许可：
*  http://www.opensource.org/licenses/mit-license.php
*  http://www.gnu.org/licenses/gpl.html
*
*/
（函数（$）{
//定义插件的新名称以及如何调用它
$.fn.dcDrilldown=函数（选项）{
//设置默认选项
var默认值={
classWrapper:'dd wrapper'，
classMenu:'dd menu'，
classParent:'dd parent'，
classParentLink:'dd-parent-a'，
classActive:'active'，
classHeader:'dd header'，
eventType:'单击'，
悬停延迟：300，
速度：“慢”，
saveState：是的，
showCount：没错，
classCount:'dd count'，
classIcon:“dd图标”，
链接类型：“反向链接”，
resetText:“全部”，
headerTag:'h3'，
defaultText:“选择选项”，
是的
};
//调用默认选项
var options=$.extend（默认值，选项）；
//作用于传递到设计中的元素
返回此。每个函数（选项）{
var$dcDrilldownObj=此；
$（$dcDrilldownObj）.addClass（默认值.classMenu）；
var$wrapper=''；
$（$dcDrilldownObj）.wrap（$wrapper）；
var$dcWrapper=$（$dcDrilldownObj）.parent（）；
var objIndex=$（$dcWrapper.index（'..+defaults.classWrapper）；
var idHeader=defaults.classHeader+'-'+objIndex；
var idWrapper=defaults.classWrapper+'-'+objIndex；
$（$dcWrapper.attr（'id'，idWrapper）；
var$header=''；
setUpDrilldown（）；
if（defaults.saveState==true）{
var cookieId=defaults.classWrapper+'-'+objIndex；
checkCookie（cookieId，$dcDrilldownObj）；
}
重置向下钻取（$dcDrilldownObj，$dcWrapper）；
$（'li a'，$dcDrilldownObj）。单击（函数（e）{
$link=这个；
$activeLi=$（this.parent（'li'）.stop（）；
$siblingsLi=$（$activeLi.siblines（）；
//向下钻取作用
如果（$（'>ul'，$activeLi）.length）{
if（$（$link）.hasClass（defaults.classActive））{
$（'ul a'，$activeLi）.removeClass（defaults.classActive）；
重置向下钻取（$dcDrilldownObj，$dcWrapper）；
}否则{
actionDrillDown（$activeLi、$dcWrapper、$dcDrilldownObj）；
}
}
//如果有子链接，则禁止浏览链接
if（$（this）.next（'ul'）。长度>0）{
e、 预防默认值（）；
}
});
//摆好手风琴
函数setUpDrilldown（）{
$arrow=''；
$（$dcDrilldownObj）.before（$header）；
//获取菜单容器的宽度和列表项的高度