0

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

需要在代码中进行哪些更改,以便仅扩展“基于凝胶的蛋白质组学”部分而折叠其他 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: .leftmenu a.expanded { background: url('../Images/collapse8.png') no-repeat 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;
}

我尝试将类更改为“折叠”,但它所做的只是改变了背景图像并且块仍然展开。

任何帮助表示赞赏。谢谢。

4

1 回答 1

0

如果您更改要关闭的菜单项的类,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();
});​
于 2012-11-20T22:38:44.340 回答