jQuery Mobile的導航欄底部

我有一個問題，真不知道如何解決這個..我有一個粘頁腳這樣的：jQuery Mobile的導航欄底部

<!-- FOOTER ICON TABS -->   
      <div data-role="footer" data-position="fixed" data-tap-toggle="false">   
      <div class="footer" data-role="navbar"> 
       <ul> 
       <li> 
        <a href="#dashboard" data-icon="dashboard" class="ui-btn-active" id="icon-dashboard"> 
        <span class="navbar-text">Dashboard</span> 
        </a> 
       </li> 
       <li> 
        <a href="#" data-icon="progress" id="icon-progress"> 
        <span class="navbar-text">Voortgang</span> 
        </a> 
       </li> 
       <li> 
        <a href="#map" data-icon="security" id="icon-security"> 
        <span class="navbar-text">Plattegrond</span> 
        </a> 
       </li> 
       <li> 
        <a href="#" data-icon="security" id="icon-security"> 
        <span class="navbar-text">Securitycheck</span> 
        </a> 
       </li> 
       </ul> 
      </div> 
      </div>

因此我設置這個造型：

.ui-footer, .footer, .footer li, .footer a, .footer a:after { 
    background-color: transparent !important; 
    border-color: transparent !important; 
    height: 70px; 
}

但它很討厭，因爲我的內容是在圖標後面，它不是很好。它看起來像這樣：

我已經改變了白色塊的高度，但塊沒有一個堅硬的高度。這是因爲通知塊是動態的，並且內容因長度而異。從而第二個街區有一個寫有Boardingpass的可摺疊街區。

它如何看：

這裏是一個FIDDLE它再現了問題。我希望有人可以幫助我在這:)

來源

2016-11-30 Sreinieren

我可以問你爲什麼你還沒有使用[jQuery Mobile的可摺疊（HTTP：//演示.jquerymobile.com/1.4.5 /可摺疊/）但您已經重新創建了一個或多或少的類似功能？也許是出於性能原因？ – deblocker

@deblocker的性能和造型 – Sreinieren

你可以只設置下邊距：

#flight-info-block { 
    margin-bottom: 80px !important; 
}

也在代碼，使用的slideToggle功能的第三parametef實現在年底同樣的效果

//open up the content needed - toggle the slide- if visible, slide up, if not slidedown. 
$content.slideToggle("slow", "swing", function() { 
    $("#flight-info-block").css("margin-bottom", "80px"); 
    $("#flight-info-block").trigger("updatelayout"); 
});

BTW：動畫的我也喜歡透明背景，然後我說你的CSS的底部以下規則：

，並刪除您在-350抵消scrollTop的：

$('html, body').animate({ 
    scrollTop: $header.offset().top 
}, 1000);

您更新小提琴：http://jsfiddle.net/yTt9b/1787/

來源

2016-12-09 14:10:08 deblocker

jQuery Mobile的導航欄底部

回答

相關問題