2

我有一个脚本应该将手风琴功能添加到垂直菜单。我主要使用这个博客的代码。我制作的菜单由多个级别组成，我在这个 jsFiddle中制作的示例只有 3 个级别，但我计划使用更多级别（这是我的客户的要求）。

当一个元素具有“选定”类时，我只希望在页面加载后立即显示该元素及其父元素。在示例中，该元素为绿色，但该元素的父元素当然也应显示。当用户选择要展开的不同元素时，它应该隐藏第一个元素并显示刚刚单击的元素的内容。

请先看一下示例，然后尝试一下。然后和下面的比较。
页面加载后，菜单首先应该是这样的：

    - Site 1
        - Site 1, page 1
        - Site 1, page 2
        - Site 1, subsite 1
            - Site 1, subsite 1, page 1
            - Site 1, subsite 1, page 2
        - Site 1, subsite 2
        - Site 1, page 3
    - Site 2

如您所见，唯一应该立即可见的是 HTML 中包含“selected”类的元素。其余的都应该简单地折叠起来。当然，一旦用户单击另一个子站点，或者站点 1 或站点 2，它应该折叠当前已“选择”的子站点，并打开已单击的另一个元素。它现在的行为绝对不是我想要的，我一直在尝试很多，但到目前为止没有成功。

我无法完全了解如何解决此问题。自上周以来，我一直在努力让它发挥作用，但我仍然陷入困境。因此，如果有人可以看一下并告诉我我做错了什么以及为什么会这样，我将不胜感激。

一些附加信息：此菜单将在 SharePoint 2013 环境中使用，它将取代 SharePoint 快速启动菜单。


在此先感谢您的时间！

编辑：
如果 jsFiddle 变得不可用，这里是 HTML 和 JavaScript 代码。

HTML：

<body>
<div id="sideNavBox">
    <ul id="rootMenu" class="static root">
        <li class="static level-0 selected"><a class="static menu-item-li" href="#"><span>Site 1</span></a>
            <ul class="static level-0-ul selected">
                <li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 1, page 1</span></a></li>
                <li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 1, page 2</span></a></li>
                <li class="static level-1 selected"><a class="static menu-item-li" href="#"><span>Site 1, subsite 1</span></a>
                    <ul class="static level-1-ul selected">
                        <li class="static level-2 selected"><a class="static menu-item-li selected" href="#"><span>Site 1, subsite 1, page 1</span></a></li>
                        <li class="static level-2"><a class="static menu-item-li" href="#"><span>Site 1, subsite 1, page 2</span></a></li>
                    </ul>
                </li>
            <li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 1, subsite 2</span></a>
                <ul class="static level-1-ul">
                    <li class="static level-2"><a class="static menu-item-li" href="#"><span>Site 1 subsite 2, page 1</span></a></li>
                    <li class="static level-2"><a class="static menu-item-li" href="#"><span>Site 1 subsite 2, page 2</span></a></li>
                </ul>

                </li>
                <li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 1, page 3</span></a></li>
            </ul>
        </li>
        <li class="static level-0"><a class="static menu-item-li" href="#"><span>Site 2</span></a>
            <ul class="static level-0-ul">
                <li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 2, page 1</span></a></li>
                <li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 2, subsite 1</span></a>
                    <ul class="static level-1-ul">
                        <li class="static level-2"><a class="static menu-item-li" href="#"><span>Site 2, subsite 1, page 1</span></a></li>
                    </ul>
                </li>
                <li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 2, subsite 2</span></a>
                    <ul class="static level-1-ul">
                        <li class="static level-2"><a class="static menu-item-li" href="#"><span>Site 2, subsite 2, page 1</span></a></li>
                        <li class="static level-2"><a class="static menu-item-li" href="#"><span>Site 2, subsite 2, page 2</span></a></li>
                    </ul>
                </li>
                <li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 2, page 2</span></a></li>
                <li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 2, page 3</span></a></li>
            </ul>
        </li>
    </ul>
</div>

JavaScript：

    // Set dynamic CSS logic:
if($('#sideNavBox .menu-item-li.selected').length){
    // Propagates the selected class, up the three:
    $('li.static').removeClass('selected');
    $('#sideNavBox .menu-item-li.selected').parents('li.static').addClass('selected');
    // Collapses top siblings of selected branch:
    $('#sideNavBox .menu-item-li.selected').parents('li.static').last().siblings().find('> ul').hide();
    $('#sideNavBox .menu-item-li.selected').parents('li.static').siblings().find('> ul').hide();
}
else {
    $('#sideNavBox .root.static > li.static > ul').hide();
}

/* CODE INTENDED FOR COLLAPSING AND EXPANDING THE level-0 AND level-0-ul ELEMENTS */
$('#sideNavBox .root.static > li.static.level-0').each(function(){      // For each element,
    if($(this).find('ul').length){                                      // That has a ul inside it,
        $(this).addClass('father').click(function(){                    // Add the class 'father' to it. 
            if($(this).children('ul').css('display') != 'none'){
                $(this).removeClass('selected').children('ul').slideUp();
            }
            else {
            /*collapse-siblings*/
                $(this).siblings().removeClass('selected').children('ul').slideUp();
            /*expand*/
                $(this).addClass('selected').children('ul').slideDown();
            }
        });
    }
});

/* SAME CODE AS ABOVE BUT NOW INTENDED FOR COLLAPSING AND EXPANDING THE level-1 AND level-1-ul ELEMENTS */
$('#sideNavBox .root.static > li.static > ul.static > li.static').each(function(){
    if($('#sideNavBox .root.static > li.static > ul.static > li.static').find('ul').length){
        $(this).addClass('father2').click(function(){
            if($(this).children('ul').css('display') != 'none'){
                $(this).removeClass('selected').children('ul').slideUp();
            }
            else {
            /*collapse-siblings*/
                $(this).siblings().removeClass('selected').children('ul').slideUp();
            /*expand*/
                $(this).addClass('selected').children('ul').slideDown();
            }
        });
    }
});

/* CODE INTENDED FOR DISABLING DEFAULT LINK BEHAVIOR FOR level-0 AND level-0-ul ELEMENTS */
$('#sideNavBox .root.static > li.static > a.static').click(function(e) {
    /*Prevent the link from activating*/
    e.preventDefault();
    /*Upon clicking header, show contents*/
    $('#sideNavBox .root.static > li.static').addClass('selected').children('ul').slideUp();
});

/* CODE INTENDED FOR DISABLING DEFAULT LINK BEHAVIOR BUT NOW FOR level-1 AND level-1-ul ELEMENTS */
$('#sideNavBox .root.static > li.static.level-0 > ul.static.level-0-ul > li.static.level-1 > a.static').click(function(e) {
    /*Prevent the link from activating*/
    e.preventDefault();
    /*Upon clicking header, show contents*/
    $('#sideNavBox .root.static > li.static.level-0 > ul.static.level-0-ul > li.static.level-1').addClass('selected');
    $('#sideNavBox .root.static > li.static.level-0 > ul.static.level-0-ul > li.static.level-1').children('ul.level-1-ul').slideUp();
});
4

2 回答 2

1

你是我的老同学：http: //jsfiddle.net/wxu6f/6/

花了一些时间，但至少它的工作...我想？

function accordionMe(selector, initalOpeningClass) {

                var speedo = 300;
                var $this = selector;
                var accordionStyle = true; // fancy or not as fancy.. (just set it to true)

                // disable all links with # as href, or the page will jump like a chicken on coce
                $this.find("li").each(function(){
                    // Find all these links
                    if ($(this).find("ul").size() != 0) {
                        // and disable them if needed
                        if ($(this).find("a:first").attr('href') == '#') {
                            $(this).find("a:first").click(function(){ return false; });
                        }
                    }
                });

                // Hide every ul first
                $("#rootMenu li>ul").hide();

                // Open all items (depending on the class you chose)
                $this.find("li."+initalOpeningClass).each(function(){
                    $(this).parents("ul").slideDown(speedo);
                });

                // and now.. time for magic
                $this.find("li a").click(function(){
                    if ($(this).parent().find("ul").size() != 0) {
                        if (accordionStyle) {
                            if(!$(this).parent().find("ul").is(':visible')){

                                // get all parents
                                parents = $(this).parent().parents("ul");

                                // get all visible ul's'
                                visible = $this.find("ul:visible");

                                // Loop through
                                visible.each(function(visibleIndex){

                                    // check if parent was closed
                                    var close = true;
                                    parents.each(function(parentIndex){
                                        if(parents[parentIndex] == visible[visibleIndex]){
                                            close = false;
                                            return false;
                                        }
                                    });

                                    // if closed, close parent
                                    if(close)
                                        if($(this).parent().find("ul") != visible[visibleIndex])
                                            $(visible[visibleIndex]).slideUp(speedo);              
                                });
                            }
                        }

                        // if the parent was shown at first, hide him and vica versa
                        if($(this).parent().find("ul:first").is(":visible"))
                            $(this).parent().find("ul:first").slideUp(speedo);

                        else
                            $(this).parent().find("ul:first").slideDown(speedo);


                    }
                }); // einde klik event
            }

            accordionMe($("#rootMenu"), "selected");
于 2013-03-26T20:50:56.213 回答
1

为什么不做一些简单的事情

$("#rootMenu li>a").click(function(e){
    var tt = $(this).closest("li");
    if(tt.hasClass("selected"))
    {
        //Collapse all children
        tt.removeClass("selected");
        $("ul",tt).slideUp(500);
        tt.removeClass("selected");
    }
    else
    {
        //expand first level ul, a.k.a direct child
        $(">ul",tt).slideDown(500);
        tt.addClass("selected");
    }
});

http://jsfiddle.net/wxu6f/4/

于 2013-03-26T10:59:49.397 回答