Question

我有一个使用div构建的菜单，每个部分由2个div（标题和内容）组成。单击标题时内容将折叠或展开，但在IE8上，部分div之间的空间在展开和折叠部分后缩小.IE9，Chrome和Firefox正确显示所有内容

This看起来如何，第一部分正确显示其下方的空间，但其余部分空间缩小

奇怪的是，如果我调整窗口大小，一切看起来都很好again

This是我正在使用的代码示例，this是jsfiddle

我希望有人解决了同样的问题。感谢

Answer 1

试试这段代码：

这里有一个问题的解释：

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

有效地，将每对标题和内容元素包装在一个包含的div中，然后将填充应用到底部。测试IE7，IE8，FF和＆amp; 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>

div之间的IE8空间正在缩小

1 个答案: