我正在尝试同时创建一个导航栏，一个始终可见的下拉菜单和一个折叠菜单。这适用于桌面浏览器，但不适用于我的手机（android 2.3.6）。这是代码：
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Pizzeria & Trattoria </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="js/bootstrap-modal.js"></script>
<script type="text/javascript" src="js/bootstrap-dropdown.js"></script>
<script type="text/javascript" src="js/bootstrap-collapse.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('#autostart').modal('show');
$("a.ref_pics").fancybox({'titlePosition':'inside'});
});
//]]>
</script>
</head>
<body>
<div id="autostart" class="modal hide fade">
<div class="modal-header">
<button class="close" data-dismiss="modal"><i class="icon-remove"></i></button>
<h3> </h3>
</div>
text.... <a data-dismiss="modal" class="btn pull-right" href="#">Cerrar</a>
</div>
<div class="container">
<div class="hero-unit home-bg">
<div class="row">
<div class="span9"><img src="img/logo.png" alt="Pizzeria & Trattoria " /></div>
<div class="span3">
</div>
</div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse" style="float:left;">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<ul class="nav pull-right">
<li class="dropdown last">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">español <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="index.php?lang=es">español</a></li>
<li><a href="index.php?lang=en">english</a></li>
<li><a href="index.php?lang=de">deutsch</a></li>
</ul>
</li>
</ul>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Bienvenida</a></li>
<li><a href="restaurante.php?lang=es">El Restaurante</a></li>
<li><a href="menu.php?lang=es">El Menú</a></li>
<li><a href="chef.php?lang=es">El Chef</a></li>
<li><a href="pizza.php?lang=es">La Pizza</a></li>
<li class="last"><a href="contacto.php?lang=es">Contacto</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</div>
<div class="row extrabottom">
<div class="span9">
<h1>...</h1>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div class="span3 picbar">
<a class="ref_pics" data-rel="group1" href="img/st_titel.jpg"><img src="img/th_titel.jpg" alt="Restaurante " /></a>
<a class="ref_pics" data-rel="group1" href="img/st_kaffee.jpg"><img src="img/th_kaffee.jpg" alt="" /></a>
<a class="ref_pics" data-rel="group1" href="img/gal_387626_R_K_B_by_ermelchen_pixelio.de.jpg"><img src="img/th_pizza.jpg" alt="" /></a>
</div>
</div>
<footer class="well">
<div class="row">
<div class="span6 pull-left"><a href="imprint.php?lang=es#gastro">índice de ilustraciones</a></div>
<div class="span6 pull-right">© </div>
</div>
</footer>
</div> <!-- /container -->
</body>
</html>
在我的 android 浏览器中，按钮（三个栏）不可点击。有没有办法将 onclick 绑定到然后展开菜单的按钮？
任何帮助是极大的赞赏。
编辑：我给可折叠菜单一个 ID 并尝试用链接切换它：<a href="#" onclick="$('#mencol').collapse('toggle')">toggle menu</a>
它适用于桌面浏览器，但不适用于我的 android。我还尝试style="float:left;"从 btn-navbar 中删除 ，再次没有成功。
已解决：猜测我删除了三个引导 javascripts bootstrap-modal.js、bootstrap-dropdown.js 和 bootstrap-collapse.js 并添加了完整的 bootstrap.min.js。现在就像一个魅力。显然android需要额外的功能......