页面加载时将显示设置为none的jQuery手风琴"heightStyle：fill"

Question

我的世界

• jQuery 1.9.1
• jQuery UI 1.10.3，尽管我的 jsfiddle示例 使用的是UI 1.9.2，似乎可以正常工作。

我的问题

stackoverflow上有许多类似的问题，但我无法找到合适的答案。基本上，我有一个jQuery手风琴，在页面加载时不显示，可以通过jQuery的.toggle()方法将其显示为block。切换效果很好，但是heightStyle：“fill”不能适当地填充空间，除非在加载页面时显示父div，这是我不想要的。

解决方案尝试

• 将脚本重新定位到文档末尾和部分。
• 重新排列切换发生的顺序：还有第二个元素#map，与手风琴同时切换关闭，反之亦然。
• 因为我不确定手风琴是否首先需要父容器，所以我尝试了几种方法：切换#accordion div，它的父div和两个div。
• 为了保险起见，我还尝试了.accordion（“refresh”）方法，并在父div和#accordion上具有可调整大小的容器。什么都不行。
• 父容器和#accordion的各种CSS定位。
• 深入jQuery.js中进行修改。考虑到我对JavaScript的经验有限，这不会持续太久。说真的，我得查一下这个“ === ”是什么。 ：）

真有趣

当单击切换按钮以隐藏手风琴并再次显示#map时，可以看到heightStyle：“fill”实际上可以工作一秒钟！我在jsfiddle中减缓了转换持续时间，以便更容易地查看。

因此，无论如何启用正确的高度计算heightStyle：“fill”，我都需要始终发生这种情况。任何建议都将不胜感激！

js fiddle： 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" );
});

- abettermap

---

我可能看错了，但是在使用Chrome时它对我很有效。赞一个漂亮而有条理的问题。 - Hanlet Escaño

感谢您的点赞。我也在使用Chrome，但它明显无法正常工作。这是我想要发生的事情：链接。请看手风琴内容如何填满整个div，第四个标题下面没有空白。 - abettermap

请尝试这个Fiddle：http://jsfiddle.net/arunu/sNdFj/ - Arun Unnikrishnan

感谢您的输入。看起来您将所有内容都放到了一个函数中，并将“刷新”置于切换之上。不幸的是，这会导致父容器高度计算过大，而不是太小（就像我在示例中所遇到的问题）。不过，我找到了一个解决方法，很快就会发布出来。虽然有点像黑客行为，但确实有效。 - abettermap

Answer 1

这是一种便宜而机智的方法，但它确实有效。基本上，在页面加载时（也就是jQuery分配手风琴高度的时候），父级div #leftpanel 的高度由于其 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/

- abettermap

Answer 2

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

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

- Simon Cooper