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 に答える