基于页脚点击显示/隐藏页脚中的导航栏

时间:2012-10-01 20:01:05

标签: cordova jquery-mobile footer navbar

jqm 1.1.1和cordorva 2.0.0

我在页脚中点击了点击,然后点击了我正在切换show()/ hide()导航栏。

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

正如FYI一样,“点按切换”不是一个选项,因为它需要点击屏幕的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;
}   

谢谢大家......

1 个答案:

答案 0 :(得分:0)

将此添加到show block:

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

将其添加到隐藏块:

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

这将删除dom中的div,所以现在菜单显示/隐藏,看起来应该......你可以将它绑定到任何事件,包括菜单按钮(我已将其绑定到菜单按钮和里面的水龙头页脚)