Question

对于此页面中的此可折叠菜单： http://2ddige.com/temps/Services/proteomics%202d_dige_copy%281%29.html

需要对代码进行哪些更改，以便仅使用基于凝胶的蛋白质组学＆＃34;部分被扩展，其他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：扩展状态由名为＆＃34;扩展

的类控制

CSS： .leftmenu a.expanded { background：url（＆＃39; ../ Images / collapse8.png＆＃39;）no-repeat 50％; line-height：35px; 颜色：＃333333; font-size：11px; 宽度：243px; padding-left：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;
}

我尝试将课程更改为＆＃34;已折叠＆＃34;但它只是改变了背景图像而且块仍在扩展。

感谢任何帮助。感谢。

Answer 1

如果您将要关闭的菜单项的类更改为collapsed，则可以在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();
});

可折叠的菜单变化

1 个答案: