jquery移动底部导航栏答案

【问题标题】：Jquery mobile bottom navbarjquery移动底部导航栏
【发布时间】：2023-03-07 04:23:02
【问题描述】：

我有一个问题，真的不知道如何解决这个问题。我有一个像这样的粘性页脚：

<!-- 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;
}

但这很烦人，因为我的内容在图标后面，而且不太好。看起来像这样：

我已经改变了白色方块的高度，但是这些方块没有固定高度。这是因为通知块是动态的，内容因长度而异。因此，第二个块有一个可折叠的块，其中写入了登机牌。

它的外观：

这是一个FIDDLE，它重现了这个问题。我希望有人可以帮助我解决这个问题:)

【问题讨论】：

请问您为什么没有使用jQuery Mobile Collapsible，但您或多或少地重新创建了类似的功能？也许是出于性能原因？
@deblocker 用于性能和样式

标签： javascript jquery html css jquery-mobile

【解决方案1】：

你可以只设置下边距：

#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");
});

顺便说一句：我也不喜欢透明背景，然后我在你的 CSS 底部添加了以下规则：

.footer {
  background-color: #00a0e5 !important;
}

并删除了你在 scrollTop 中的 -350 偏移量：

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

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

【讨论】：