Question

我创建了一个包含面板和内容的模板。根据模板的类（顶部，左侧，右侧或底部），面板将具有不同的位置。使用转换和类来执行展开和折叠动画。

编辑：这是一个小提琴：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);

当我在模板上使用Top或Left类时，一切都按预期工作，但当我使用Right或Bottom时，面板在移出正文时会消耗窗口并导致滚动条出现

我在另一个与overflow:hidden相关的问题中读到了它可能是因为相对定位的元素，但我没有。我也试图定位html标签并添加overflow:hidden，但它也没有帮助。

我该怎么做才能防止这种情况发生？

Answer 1

这应该可以解决您的问题 -

body {
    max-width:100%;
}

Answer 2

问题在于CSS。 Vector 对max-width: 100%;的回答非常好，但如果不起作用，请使用!Important覆盖功能。例如：

.PanelTemplate {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden; !Important
 }

这将有助于覆盖溢出的其他规则！

CSS - 无法溢出：在右侧或底部溢出时隐藏起作用

2 个答案: