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で「選択された」クラスを含む要素だけです。残りはすべて単純に折りたたむ必要があります。もちろん、ユーザーが別のサブサイト、またはサイト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

こんなに簡単なことをしてみませんか

$("#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 に答える
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 に答える