jQuery 手风琴“heightStyle：fill”在页面加载时显示设置为无答案

【问题标题】：jQuery accordion "heightStyle: fill" with display set to none on page loadjQuery 手风琴“heightStyle：fill”在页面加载时显示设置为无
【发布时间】：2013-10-22 19:24:55
【问题描述】：

我的世界

jQuery 1.9.1
jQuery UI 1.10.3，虽然我的 jsfiddle example 使用 UI 1.9.2 并且似乎工作正常。

我的问题

stackoverflow 上有很多类似的问题，但我找不到合适的答案。基本上我有一个 jQuery 手风琴，在页面加载时不会显示，它的显示可以通过 jQuery .toggle() 方法更改为 block。切换工作正常，但 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" );
});

【问题讨论】：

我可能看错了人，但使用 Chrome 对我来说效果很好。 +1 提出有条理的好问题。
感谢您的支持。我也在 Chrome 中，它肯定不起作用。这就是我想要发生的事情：link。看看手风琴内容如何填充整个 div 并且第四个标题下方没有空格？
试试这个小提琴jsfiddle.net/arunu/sNdFj
感谢您的意见。看起来您将所有内容都放入了一个函数中，并将“刷新”移到了切换按钮上方。不幸的是，这导致父高度的计算太大而不是太小（就像我在我的例子中所做的那样）。我确实想出了一个解决方法，我将很快发布。这更像是一种 hack，但它确实有效。

标签： javascript jquery html css jquery-ui

【解决方案1】：

这是一种廉价而厚颜无耻的技巧，但它确实有效。基本上，父 div 的高度 #leftpanel 在页面加载时（即 jQuery 分配手风琴高度时）没有被正确计算，因为它的 display:none 属性。所以，在添加手风琴功能之前，我自己抓住了高度并手动将其分配给#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”语句而不是直接分配属性，那是因为当页面加载到 800 像素及以上的屏幕宽度时，我在其中显示了 #leftpanel 的媒体查询。

来吧，小提琴：http://jsfiddle.net/72rw2/

【讨论】：

【解决方案2】：

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

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

【讨论】：