頁面加載時顯示設置為無的 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，這是我不想要的。

我的解決方案嘗試

在文檔末尾和<head>部分重新定位腳本。
重新排列切換發生的順序：還有第二個元素#map ，它在手風琴打開的同時關閉，反之亦然。
因為我不完全確定手風琴首先是否需要父容器，所以我嘗試了幾種方法：切換#accordion div、它的父 div 和兩個 div。
為了更好地衡量，我還嘗試了.accordion( "refresh" )方法，以及在父 div 和#accordion上都有一個可調整大小的容器。 沒有湯。
父容器和#accordion各種 CSS 定位。
深入了解 jQuery.js。 鑒於我剛剛接觸 javascript 的經驗，這並沒有持續多久。 說真的，不得不查這個東西=== 。 :)

我的，這很有趣

當單擊切換按鈕以隱藏手風琴並再次顯示#map時，您可以看到heightStyle: "fill"實際上工作了一秒鍾！ 我減慢了 jsfiddle 中的過渡持續時間，以便更容易看到它。

所以，無論heightStyle: "fill"為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

這是一種廉價而厚顏無恥的黑客，但它有效。 基本上，父 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”語句而不是直接分配屬性，那是因為在媒體查詢中，當頁面在#leftpanel及以上的屏幕寬度上加載時，我會顯示#leftpanel 。

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

Answer 2

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

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

頁面加載時顯示設置為無的 jQuery 手風琴“heightStyle：fill”

問題描述

我的世界

我的問題

我的解決方案嘗試

我的，這很有趣

HTML

CSS

Javascript

2 個解決方案

解決方案1
2 已采納 2013-10-23 18:48:42

解決方案2
1 2020-08-15 02:47:29

頁面加載時顯示設置為無的 jQuery 手風琴“heightStyle：fill”

問題描述

我的世界

我的問題

我的解決方案嘗試

我的，這很有趣

HTML

CSS

Javascript

2 個解決方案

解決方案1 2 已采納 2013-10-23 18:48:42

解決方案2 1 2020-08-15 02:47:29

解決方案1
2 已采納 2013-10-23 18:48:42

解決方案2
1 2020-08-15 02:47:29