对于此页面中的这个可折叠菜单: 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 { 背景:url('../Images/collapse8.png') 不重复 50%; 行高:35px; 颜色:#333333; 字体大小: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;
}
我尝试将类更改为“折叠”,但它所做的一切都改变了背景图像并且 block 仍然展开。
感谢任何帮助。谢谢。
最佳答案
如果将要关闭的菜单项的类更改为 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();
});
关于javascript - 可折叠菜单变体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13480956/