移动应用程序中的CSS/jQuery问题
我有一个顶部栏和一个底部栏，它们固定在视口的顶部和底部。在它们之间是一个map div，javascript将其转换为占据屏幕其余部分的googlemap 但是，在底部栏的上方是一个display:none元素，它包含一组换行符和水平规则。这是我显示一个没有任何内容的列表的临时方法，直到找到更好的方法来模拟iOS风格的列表。（这就是我所指的：）如果有人对此有建议，那就太好了，但这不是这里的主要问题。javascript用项目填充列表并清除空行，而jQuery函数只需点击底部栏上的按钮，即可将列表滑入视图。这一切都很好 当您按下底部的按钮时，列表应在地图上向上滑动并在顶部栏停止，然后您可以滚动浏览它。两条横杆都在视线中。再按一下按钮，它就会滑开 所有这些的问题是，在打开列表后，当您滚动列表时，顶部和底部栏会神奇地成为列表的一部分，并与所有其他项目一起滚动。这让我困惑不已，因为它们都是固定的，但显然我犯了一个错误 这是我的密码。所有CSS都是内联的。我还显示了显示列表的jQuery函数；这很简单。我应该注意的是，在XCode模拟器中，这非常有效，但是当我在itouch上测试它时，我得到了上面的结果。非常混乱移动应用程序中的CSS/jQuery问题,jquery,css,mobile-application,mobile-website,Jquery,Css,Mobile Application,Mobile Website,我有一个顶部栏和一个底部栏，它们固定在视口的顶部和底部。在它们之间是一个map div，javascript将其转换为占据屏幕其余部分的googlemap 但是，在底部栏的上方是一个display:none元素，它包含一组换行符和水平规则。这是我显示一个没有任何内容的列表的临时方法，直到找到更好的方法来模拟iOS风格的列表。（这就是我所指的：）如果有人对此有建议，那就太好了，但这不是这里的主要问题。javascript用项目填充列表并清除空行，而jQuery函数只需点击底部栏上的按钮，即可将列表
<head>
<script type="text/javascript">
$("#bottombar").click(function(){
//alert("Trigger!");
$("#resultsList").slideToggle("fast");
});
</script>
<head>
<body>
<div style="position:fixed; top:0px; width:100%; border-bottom: 3px solid; z-index: 19; background:#FFFFFF; padding:5px;">
<a style="text-decoration:none; z-index:20;" href="index.html">Home</a>
</div>
<br />
<div id="map_canvas" style="width:100%; margin-top:10px; height:400px;"></div>
<div style="position:relative">
<div id="resultsList" style="background: #FFFFFF; width:100%; margin-top:15px; height: 400px; z-index:1; position:absolute; bottom:0; left:0; display:none">
<br id="top"/>
<hr class="filler"/>
<br class="filler"/>
<hr class="filler"/>
<br class="filler"/>
<hr class="filler"/>
<br class="filler"/>
<hr class="filler"/>
<br class="filler"/>
<hr class="filler"/>
<br class="filler"/>
<hr class="filler"/>
<br class="filler"/>
<hr class="filler"/>
<br class="filler"/>
<hr class="filler"/>
<br class="filler"/>
<hr class="filler"/>
<br class="filler"/>
<hr class="filler"/>
<br class="filler"/>
</div>
</div>
<div style="position:fixed; bottom:0px; width:100%; border-top: 3px solid; z-index: 19; background:#FFFFFF; padding:5px;">
<button id="bottombar" type="button" style="z-index:20; padding-bottom:5px;">Show as List</button>
</div>
</body>
$（“#底部栏”）。单击（函数（）{
//警报（“触发器！”）；
$（“#结果列表”）.slideToggle（“快速”）；
});