使用3列和3列表视图
我需要在页面中使用3列，有3个不同的列表视图，但是当我使用第一列时
并关闭此div，其他列不会出现。
left_menu.php和right_menu.php类似于principal.php
怎么解决这个？
body { margin: 0; /* margin and padding only necessary to cater for Mac IE5 */ padding: 0; /*\*/ overflow: hidden; /* because Mac IE5 don't understand */ } div { margin: 0; padding: 0; } #central { /*\*/ position: absolute; top: 0%; right: 40%; bottom: 0%; left: 20%; /* Exclude all previous props for Mac IE5 */ margin: 26% 31% 1% 21%; /* Cater for Mac IE5 */ /*\*/ margin: 0; /* Put back for all the rest */ /*\*/ overflow: auto; /* no need for Mac IE5 to see this */ } #sidebar-left { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; overflow: auto; } #sidebar-right { position: absolute; top: 4px; right: -4px; bottom: 0; overflow: auto; width: 35%; }
//-----------------------------------// principal.php Select
Home 我创建了一个使用网格的例子; 主菜单，左菜单和右菜单。 可以使用.show()和.show()显示和隐藏菜单。 一旦菜单被隐藏，主体就会填充空间。 这是代码。
工作演示
HTML
CSS
.ui-block-a { width: 25% !important; height: 100% !important; } .ui-block-b { width: 50% !important; height: 100% !important; } .ui-block-c { width: 25% !important; height: 100% !important; } .menu-l { font-size: 11px !important; margin-left: 5px !important; padding-top: 13px !important; } .menu-r { font-size: 11px !important; margin-right: 5px !important; padding-top: 13px !important; }
JQM代码
$('#btn-l').on('click', function () { if ($('#menu-l').is(':visible')) { $('#menu-l').hide(); $(this).buttonMarkup({ icon: 'arrow-r' }); } else { $('#menu-l').show(); $(this).buttonMarkup({ icon: 'arrow-l' }); } if ($('#menu-r').is(':visible') && $('#menu-l').is(':visible')) { $('.ui-block-b').attr('style', 'width: 50% !important;'); } else if ($('#menu-r').is(':visible') || $('#menu-l').is(':visible')) { $('.ui-block-b').attr('style', 'width: 75% !important;'); } else { $('.ui-block-b').attr('style', 'width: 100% !important;'); } }); $('#btn-r').on('click', function () { if ($('#menu-r').is(':visible')) { $('#menu-r').hide(); $(this).buttonMarkup({ icon: 'arrow-l' }); } else { $('#menu-r').show(); $(this).buttonMarkup({ icon: 'arrow-r' }); } if ($('#menu-r').is(':visible') && $('#menu-l').is(':visible')) { $('.ui-block-b').attr('style', 'width: 50% !important;'); } else if ($('#menu-r').is(':visible') || $('#menu-l').is(':visible')) { $('.ui-block-b').attr('style', 'width: 75% !important;'); } else { $('.ui-block-b').attr('style', 'width: 100% !important;'); } }); // Left menu and subm-menu $('#sub').hide(); $('#main').on('click', 'li a', function () { $('#main').hide(); $('#sub').show(); }); $('#sub').on('click', 'a#back', function () { $('#main').show(); $('#sub').hide(); });