根据页脚点击在页脚中显示/隐藏导航栏答案

【问题标题】：show/hide navbar in footer based on footer tap根据页脚点击在页脚中显示/隐藏导航栏
【发布时间】：2012-09-22 17:02:47
【问题描述】：

jqm 1.1.1 和cordorva 2.0.0

我在页脚中捕获点击，并在点击时切换显示（）/隐藏（）导航栏。

到目前为止，我正在捕获水龙头，导航栏正在显示/隐藏，但是当它显示时，它会将页面延长导航栏的高度。这种长度并不明显，但它使页面即使在导航栏被隐藏后也可以滚动。（它只将导航栏高度添加到页面底部一次。）

仅供参考，“点击切换”不是一个选项，因为它需要点击屏幕的 ui 内容部分，并且还有其他可点击项，这就是我必须在页脚中捕获点击的原因。

我怎样才能不将那个长度添加到页面底部，以便导航栏更像是一个覆盖而不是扩展或者我怎样才能在 hide() 上删除那个额外的高度；

页脚代码如下所示：

<div data-role="footer" data-position="fixed" data-theme="b">
  <div id="menu" data-role="navbar" data-iconpos="top">
    <ul>
      <li><a href="#" data-icon="gear">Settings</a></li>
      <li><a href="#" data-icon="delete">Delete</a></li>
    </ul>
  </div>
  <h6>App Footer Text</h6>
</div><!-- /footer -->

显示/隐藏 javascript 是这样的：

if(stateMenu == false)
{
  $('#menu').addClass('fixed');
  $("#menu").show();
  stateMenu = true; 
}
else
{
  $('#menu').removeClass('fixed'); 
  $('#menu').hide();  
  stateMenu = false;
}

谢谢大家...

【问题讨论】：

标签： cordova jquery-mobile footer navbar

【解决方案1】：

将此添加到显示块：

$('#menu').css('display', 'normal');

将此添加到隐藏块中：

$('#menu').css('display', 'none');

这会从 dom 中删除 div，因此现在菜单显示/隐藏并且看起来应该...您可以将其绑定到包括菜单按钮在内的任何事件（我已将其绑定到菜单按钮和里面的点击页脚）

【讨论】：