0

divを使用して作成されたメニューがあり、各セクションは2つのdiv（タイトルとコンテンツ）で構成されています。タイトルをクリックするとコンテンツが折りたたまれたり展開されたりしますが、IE8ではセクションを展開したり折りたたんだりすると、セクションdiv間のスペースが縮小します。IE9、Chrome、Firefoxではすべてが正しく表示されます。

このように見えます。最初のセクションはその下のスペースで正しく表示されていますが、残りのセクションではスペースが縮小されています

奇妙なことに、ウィンドウのサイズを変更すると、すべてが再び正常に表示されます

これは私が使用しているコードのサンプルであり、これはjsfiddleです

誰かが同じ問題を解決したことを願っています。ありがとう

4

1 に答える 1

1

このコードを試してください：

ここに問題の説明があります：

http://jqueryfordesigners.com/animation-jump-quick-tip/

事実上、タイトルとコンテンツ要素の各ペアを含む div でラップし、その下部にパディングを適用します。IE7、IE8、FF、および Chrome でテスト済み

 <!doctype html>
<html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $(".menu-section-content").hide();
        $(".menu-section-title").click(function() {
            var theHeight = $(this).height();
            $(this).css('height', theHeight);
            $(this).next(".menu-section-content").slideToggle(600);
            $(this).toggleClass('collapse');
        });
    });
    </script>

    <style>
        div.menu-section-content
        {
            border: 1px solid #777;
            border-top: none;
            padding: 10px;
            margin-left: 5px;
            background-color: #ffffff;
        }
        div.menu-section-title
        {
            font-size: 100%;
            border: solid 1px #777777; /*border-radius: 5px 0px 0 0;*/
            background-color: #A9C3C4;
            color: #fff;
            font-weight: 500;
            margin-left: 5px;
            cursor: pointer;
            clear: both;
            padding: 5px;


        }
        .expand
        {
            background-image: url('http://upload.wikimedia.org/wikipedia/commons/1/1a/Silk_bullet_arrow_up.png');
            background-repeat: no-repeat;
            background-position: right center;
        }
        .collapse
        {
            background-image: url('http://souper-spices.com/wp-content/themes/shopperpress/template_shopperpress/images/langs/arrow.png');
            background-repeat: no-repeat;
            background-position: right center;
        }

        .container {
            padding-bottom: 10px;
        }

    </style>
    </head>

    <body>
    <div class="container">
    <div class="menu-section-title expand">
    title
    </div>

    <div class="menu-section-content">
        options
    </div>

    </div>

    <div class="container">
    <div class="menu-section-title expand">
    title
    </div>

    <div class="menu-section-content">
        options
    </div>
    </div>

    <div class="container">
    <div class="menu-section-title expand">
    title
    </div>

    <div class="menu-section-content">
        options
    </div>
    </div>

    <div class="container"> 
    <div class="menu-section-title expand">
    title
    </div>

    <div class="menu-section-content">
        options
    </div>
    </div>

    </body>
</html>
于 2012-05-30T16:03:32.270 に答える