个人中心
gpt4 book ai didi

jQuery垂直 Accordion 菜单: parent nodes collapse when clicking child node

转载 作者：行者123 更新时间：2023-12-01 04:14:59 25 4
gpt4 key购买 nike

我有一个脚本，可以将 Accordion 功能添加到垂直菜单中。我主要使用 this blog 中的代码。我制作的菜单由多个级别组成，我在this jsFiddle中制作的示例只有 3 层深，但我计划使用更多(这是我的客户的要求)。

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

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

    - 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();
});

最佳答案

这是我的老同学: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");

关于jQuery垂直 Accordion 菜单: parent nodes collapse when clicking child node，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15617549/

25 4 0
文章推荐： OpenGL gluProject() - 奇怪的结果
文章推荐： file - 强制 : passing file extensions in a "diff" command
文章推荐： java - 不要在 Spring MVC 3 中使用 Jackson 序列化子类型属性
文章推荐： asp.net-mvc - 公共(public)字段上的 DataAnnotations 与 MVC 中的属性
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com