0

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

编辑：这是一个小提琴：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到它，但它也没有帮助。

我能做些什么来防止这种情况发生？

4

2 回答 2

2

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

body {
    max-width:100%;
}
于 2013-04-05T20:54:29.873 回答
1

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

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

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

于 2014-09-06T18:39:25.160 回答