Question

我的世界

jQuery 1.9.1
jQuery UI 1.10.3 ，虽然我的jsfiddle example使用的是用户界面1.9.2，但似乎工作正常。

我的问题

在stackoverflow上有很多类似的问题，但我无法找到合适的答案。基本上我有一个jQuery手风琴，当页面加载时不会显示，它的显示可以通过jQuery block方法更改为.toggle()。切换工作正常，但heightStyle: "fill"没有正确填充空格除非在加载页面时显示父div，这是我不想要的。

我在解决方案中的尝试

在文档末尾和<head>部分重新定位脚本。
重新排列切换发生的顺序：还有第二个元素#map，它在手风琴开启的同时切换，反之亦然。
由于我不完全确定手风琴是否首先需要父容器，我已经尝试了几种方法：切换#accordion div，其父div和两个div。
为了更好的衡量，我还尝试了.accordion( "refresh" )方法，以及在父div和#accordion上都有一个可调整大小的容器。没有汤。
父容器和#accordion的各种CSS定位。
在jQuery.js中深入了解我的手。鉴于我对javascript的初步体验，这并没有持续多久。说真的，不得不查看这件事===。：）

我的，这很有意思

当点击切换按钮隐藏手风琴并再次显示#map时，您可以看到heightStyle: "fill"实际上工作了一秒钟！我减慢了jsfiddle中的过渡持续时间，以便更容易看到它。

所以，无论是为heightStyle: "fill"启用正确的高度计算，这都是我需要一直发生的事情。任何建议表示赞赏！

js小提琴： http://jsfiddle.net/Y8B4W/1/

HTML

<div>
  <div class="page-header">
    <div id="menu">Menu</div>
  </div>
  <div id="leftpanel">
    <div id="accordion">
      <h3>Heading 1</h3>
      <div>
        <p>...</p>
      </div>
      <!-- ...repeat for three more headings/sections... -->
    </div><!--accordion-->
  </div><!-- #leftpanel -->
  <div id="map"></div>
</div>

CSS

body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    color: #000;
}
.page-header {
    width: 100%;
    height: 3em;
    background: gray;
}
#menu {
    font-size: 1em;
    margin: 0.5em;
    font-weight: bold;
    cursor: pointer;
}
#leftpanel {
    display: none;
    background: blue;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 3em;
    left: 0;
    bottom: 0;
    width: 100%;
}
#map {
    position: absolute;
    bottom: 0;
    top: 3em;
    width: 100%;
    background: yellow;
    line-height: 1.5em;
}

的Javascript

$( "#accordion" ).accordion({
    heightStyle: "fill",
    collapsible: true
});
$( "#menu" ).click(function() {
    $( "#map" ).toggle({
        duration: 2000
    });
    $( "#leftpanel" ).toggle({
        duration: 2000
    });
    $( "#accordion" ).accordion( "refresh" );
});

Answer 1

这是一种廉价而厚颜无耻的黑客攻击，但它确实有效。基本上父页面的高度#leftpanel，由于其display:none属性，在加载页面时（jQuery指定手风琴的高度时）没有正确计算。所以，我自己抓住了高度，并在手风琴功能被添加之前手动将其分配给#accordion，这就像一个梦想：

$( "#menu" ).click(function() {
    $( "#map" ).toggle( "slow" );
    if ($( "#leftpanel" ).css("display") == "none") {
        $(function() {
            $( "#leftpanel").css("display", "block");
            var accordHt = $( "#leftpanel" ).css( "height" );
                $( "#accordion").css("height", accordHt);
            $( "#accordion" ).accordion({
                heightStyle: "fill",
                collapsible: true
            });
       });
    };
});

如果您想知道为什么'if'语句而不是直接分配属性，那是因为媒体查询在页面加载到屏幕宽度800px及以上时我显示#leftpanel

继续，小提琴：http://jsfiddle.net/72rw2/

Answer 2

另一种方法是在display:none更改后调用刷新。

$( "#menu" ).click(function() {
    $( "#leftpanel").css("display", "block");
    $( "#accordion" ).accordion( "refresh" );
}

jQuery手风琴“heightStyle：fill”，页面加载时显示设置为none