Question

我想在各个部分中使用可折叠菜单。但它不起作用，当我将class =“collapsed”添加到SECTION B-B时，它显示扩展而不点击。我希望第2.2节或B-B部分像下拉。我应该添加或改变什么呢？非常感谢您的帮助。

JavaScript的：

$(document).ready(function () {
    setTimeout(function () {
        // Slide
        $('#menu1 > li > a.expanded + ul').slideToggle('medium');
        $('#menu1 > li > a').click(function () {
            $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').slideToggle('medium');
        });
        $('#example1 .expand_all').click(function () {
            $('#menu1 > li > a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('> ul').slideDown('medium');
        });
        $('#example1 .collapse_all').click(function () {
            $('#menu1 > li > a.expanded').addClass('collapsed').removeClass('expanded').parent().find('> ul').slideUp('medium');
        });
    }, 250);
});

HTML

<div id="example1">
    <ul id="menu1" class="example_menu">
        <li><a class="collapsed" href="#">SECTION A</a>
            <ul>
                <li><a href="#">SECTION A-A</a></li>
                <li><a href="#">SECTION A-B</a></li>
                <li><a href="#">SECTION A-C</a></li>
            </ul>
        </li>

        <li><a class="collapsed" href="#">SECTION B</a>
            <ul>
                <li><a href="#">SECTION B-A</a></li>
                <ul>
                    <li><a class="collapsed" href="#">SECTION B-B</a></li>
                    <li><a href="#">SECTION B-B-1</a></li>
                    <li><a href="#">SECTION B-B-2</a></li>
                    <li><a href="#">SECTION B-B-3</a></li>
                    <li><a href="#">SECTION B-B-4</a></li> 
                </ul>
            </ul>       
        </li>

        <li><a class="collapsed" href="#">SECTION C</a>
            <ul>
                <li><a href="#">SECTION C-A</a></li>
                <li><a href="#">SECTION C-B</a></li>            
                <li><a href="#">SECTION C-C</a></li>
            </ul>       
        </li>
    </ul>
</div>

CSS

body {
    font: 10pt Arial, Helvetica, Sans-serif;
    background-image: url();
    margin: 0px;
}
a {
    text-decoration: none;
}
#example1,
#example2,
#example3,
#example4,
#example5 {
    float: left;
}

.expand_all,
.collapse_all {
    cursor: pointer;
}

.example_menu {
    font-size: 95%;
    list-style: none;
    margin: 0;
    padding: 0;
    vertical-align: top;
    width: 230px;
}

.example_menu ul {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu1,
#menu2,
#menu3,
#menu4,
#menu5 {
    margin: 0;
    color: #96C;
}

#menu1 li,
#menu2 li,
#menu3 li,
#menu4 li,
#menu5 li,
.example_menu li {
    background-image: none;
    margin: 0;
    padding: 0;
}

.example_menu ul ul {
    display: block;
}

.example_menu ul ul li a {
    padding-left: 20px;
    width: 202px;
}

.example_menu li.header3 a {
    padding-left: 34px;
    width: 188px;
}

.example_menu a {
    color: #000;
    cursor: pointer;
    display: block;
    font-weight: bold;
    margin-left: 0;
    width: 211px;
    padding-top: 18px;
    padding-right: 0px;
    padding-bottom: 12px;
    padding-left: 19px;
}

.example_menu a.expanded {
    background: #bbb url('images/collapse.gif') no-repeat 3px 61%;
}

.example_menu a.collapsed {
    border-top: 1px solid #E3E3E3;
    background-color: #bbb;
    background-image: url(images/expand.gif);
    background-repeat: no-repeat;
    background-position: 3px 61%;
}

.example_menu a.normal {
    background: none repeat scroll 0 0 #BBBBBB;
}

.example_menu a:hover {
    text-decoration: none;      
}

.example_menu ul a {
    background: #e8e8e8;
    border-top: 2px solid #fff;
    color: #000;
    display: block;
    font-weight: normal;
    padding: 3px 8px 2px 17px;
    width: 205px;
}

.example_menu ul a:link {
    font-weight: bolder;
}

.example_menu ul a:hover {
    background : #f5f5f5;
    text-decoration: underline;
}

.example_menu li.active a {
    background: #fff;
}

.example_menu li.active li a {
    background: #e8e8e8;
}

#menu1 li.footer,
#menu2 li.footer,
#menu3 li.footer,
#menu4 li.footer,
#menu5 li.footer,
.example_menu .footer {
    background: transparent url('images/footer.jpg') no-repeat 0 0;
    border-top: 2px solid #fff;
    height: 9px;
    line-height: 15px;
    margin: 0 0 10px 0;
    width: 131px;
}
.example_menu .footer span {
    display: none;
}

Answer 1

修复你的html本身似乎解决了一半的问题。

您需要在css中添加以下内容

a.collapsed + ul{
display:none;
}

注意：我在setTimeout之外使用了点击事件处理程序，这似乎是不必要的（自slideToggle('medium') timeOut后无需<ul>和{{1}}来补偿它s使用css隐藏

检查此Fiddle

Answer 2

我没有完全深入到您的代码中。但这将是一个开始：

更改第二级的HTML结构以匹配第一级下拉：

<li><a class="collapsed" href="#">SECTION B</a>
        <ul>
            <li><a href="#">SECTION B-A</a>
            </li>
            <li><a class="collapsed" href="#">SECTION B-B</a>
                <ul>
                    <li><a href="#">SECTION B-B-1</a>
                    </li>
                    <li><a href="#">SECTION B-B-2</a>
                    </li>
                    <li><a href="#">SECTION B-B-3</a>
                    </li>
                    <li><a href="#">SECTION B-B-4</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>

并“概括”您的点击处理程序：

[...]
    $('#menu1 li > a.expanded + ul').slideToggle('medium');
    $('#menu1 li > a').click(function () {
        $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').slideToggle('medium');
    });
[...]

不确定您的“所有”处理程序。没有来源你必须自己解决：）

如何使用嵌套的可折叠菜单？

2 个答案: