0
我創建了一個包含面板和內容的模板。根據模板的類別（頂部，左側，右側或底部），面板將具有不同的位置。展開和摺疊動畫使用過渡和類來執行。CSS - 無法獲得溢出：在右側或底部溢出時隱藏起作用
編輯： 這裏是一個小提琴：http://jsfiddle.net/ckkVx/2/ /EDIT
下面是HTML代碼：
<!DOCTYPE html>
<html>
<head>
<link href="../Css/reset.dev.css" type="text/css" rel="stylesheet">
<link href="../Css/V_PanelTemplate.dev.css" type="text/css" rel="stylesheet">
<script src="../Js/jquery-1.9.1.min.js" type="text/javascript">
<script src="../Js/V_PanelTemplate.dev.js" type="text/javascript">
</head>
<body class="PanelTemplate Bottom">
<div class="Panel AutoHide Collapsed">PANEL</div>
<div class="Content Expanded">CONTENT</div>
</body>
</html>
這裏是CSS代碼：
#CHARSET "UTF-8";
.PanelTemplate {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.PanelTemplate > .Panel,
.PanelTemplate > .Content {
position: absolute;
-webkit-transition: ease-in-out 400ms;
-moz-transition: ease-in-out 400ms;
-ms-transition: ease-in-out 400ms;
-o-transition: ease-in-out 400ms;
transition: ease-in-out 400ms;
}
.PanelTemplate.Top > .Panel,
.PanelTemplate.Bottom > .Panel {
height: 100px;
left: 0;
right: 0;
}
.PanelTemplate.Left > .Panel,
.PanelTemplate.Right > .Panel {
width: 200px;
top: 0;
bottom: 0;
}
.PanelTemplate.Top > .Content,
.PanelTemplate.Bottom > .Content {
left: 0;
right: 0;
}
.PanelTemplate.Left > .Content,
.PanelTemplate.Right > .Content {
top: 0;
bottom: 0;
}
.PanelTemplate.Top > .Panel {
top: -90px;
}
.PanelTemplate.Left > .Panel {
left: -190px;
}
.PanelTemplate.Right > .Panel {
right: -190px;
}
.PanelTemplate.Bottom > .Panel {
bottom: -90px;
}
.PanelTemplate.Top > .Panel.Expanded {
top: 0;
}
.PanelTemplate.Left > .Panel.Expanded {
left: 0;
}
.PanelTemplate.Right > .Panel.Expanded {
right: 0;
}
.PanelTemplate.Bottom > .Panel.Expanded {
bottom: 0;
}
.PanelTemplate.Top > .Content {
top: 100px;
bottom: 0;
}
.PanelTemplate.Left > .Content {
left: 200px;
right: 0;
}
.PanelTemplate.Right > .Content {
right: 200px;
left: 0;
}
.PanelTemplate.Bottom > .Content {
bottom: 100px;
top: 0;
}
.PanelTemplate.Top > .Content.Expanded {
top: 10px;
}
.PanelTemplate.Left > .Content.Expanded {
left: 10px;
}
.PanelTemplate.Right > .Content.Expanded {
right: 10px;
}
.PanelTemplate.Bottom > .Content.Expanded {
bottom: 10px;
}
/* Test CSS */
.PanelTemplate > .Panel {
background: #777;
color: #FFF;
}
.PanelTemplate > .Content {
background: #333;
color: #FFF;
}
而且，如果需要的JavaScript代碼：
(function($) {
$(document).ready(function() {
var CLOSE_DELAY = 1000;
var $panel = $('.PanelTemplate > .Panel.AutoHide').first();
$content = $('.PanelTemplate > .Content').first();
$panel.mouseenter(function() {
$panel
.addClass('Expanded')
.removeClass('Collapsed')
.data('isMouseOver', true);
$content
.removeClass('Expanded')
.addClass('Collapsed');
}).mouseleave(function() {
$panel.data('isMouseOver', false);
// Waiting a short time in case the mouse accidently leaves
var timeout = setTimeout(function() {
// If it's no longer over after time out, closing
if(! $panel.data('isMouseOver')) {
$panel
.removeClass('Expanded')
.addClass('Collapsed');
$content
.addClass('Expanded')
.removeClass('Collapsed');
}
clearTimeout(timeout);
}, CLOSE_DELAY);
});
});
})(jQuery);
當我在模板上使用頂部或左側的類時，一切按預期工作，但是當我使用Right或Bottom時，面板在移出正文時會花費窗口並使滾動條出現。
我讀了另一個與overflow:hidden有關的問題，比它可能是由於相對定位的元素，但我沒有任何。我也試圖定位html標籤並添加overflow:hidden，但它也沒有幫助。
我能做些什麼來防止這種情況發生？
你可以做一個簡化小提琴請 – Huangism 2013-04-05 20:46:14
爲什麼有這麼多的CSS？在您的HTML – caramba 2013-04-05 20:46:51
**中，沒有.PanelTemplate.Left和Right到Huangism **它是儘可能簡單的。除了背景和文字顏色以及面板和內容的啞文本外，我沒有添加任何內容。這裏是一個小提琴，如果你想要：http://jsfiddle.net/ckkVx/1/ ** caramba **沒有右或左的HTML，因爲它是隻用於一次（即例如面板不能位於左側和右側）。這裏有一個Bottom的例子，但我也可以使用Left，Right或Top，這只是四種可能性之一。底部和右邊是那些不按預期工作的。 – Virus721 2013-04-05 20:53:36