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的导航栏底部

回答

相关问题