Javascript 可折叠菜单变体

对于此页面中的可折叠菜单：

代码中需要做哪些更改，以便只扩展“基于凝胶的蛋白质组学”部分，而其他3个类别则被折叠？ Javascript:

// Appear/Disappear
            $('#menu4 > li > a.expanded + ul').show();
            $('#menu4 > li > a').click(function() {
                $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').toggle();
            });
            $('#example4 .expand_all').click(function() {
                $('#menu4 > li > a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('> ul').show();
            });
            $('#example4 .collapse_all').click(function() {
                $('#menu4 > li > a.expanded').addClass('collapsed').removeClass('expanded').parent().find('> ul').hide();
            });

HTML：扩展状态由名为“expanded”的类控制

CSS： .左菜单a.展开{ 背景：url（'../Images/collapse8.png'）不重复50%； 线高：35px； 颜色：#333333； 字体大小：11px； 宽度：243px； 左侧填充：30px

    }
    .leftmenu a.collapsed {
        background: url('../Images/expand8.png') no-repeat 50%;
        line-height: 35px;
        color: #333333;
        font-size: 11px;
        width: 243px; 
        padding-left:30px;
}

我尝试将类更改为“折叠”，但它所做的一切都会更改背景图像，块仍会展开

---

非常感谢您的帮助。谢谢。

如果您将要关闭的菜单项的类别更改为“折叠”，则可以在javascript中添加以下行，以便在加载时关闭菜单：

$('#menu4 > li > a.collapsed + ul').hide();

您的javascript现在应该如下所示：

// Appear/Disappear
$('#menu4 > li > a.expanded + ul').show();
$('#menu4 > li > a.collapsed + ul').hide();
$('#menu4 > li > a').click(function() {
    $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').toggle();
});
$('#example4 .expand_all').click(function() {
    $('#menu4 > li > a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('> ul').show();
});
$('#example4 .collapse_all').click(function() {
    $('#menu4 > li > a.expanded').addClass('collapsed').removeClass('expanded').parent().find('> ul').hide();
});​