Twitter bootstrap android浏览器上无法单击折叠的菜单按钮_Twitter Bootstrap_Collapse

Twitter bootstrap android浏览器上无法单击折叠的菜单按钮

twitter-bootstrap

Twitter bootstrap android浏览器上无法单击折叠的菜单按钮,twitter-bootstrap,collapse,Twitter Bootstrap,Collapse,我正在尝试制作一个导航栏，它既有一个始终可见的下拉菜单，也有一个折叠菜单。这在桌面浏览器上运行良好，但在我的手机（android 2.3.6）上不起作用。代码如下： <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Pizzeria & Trattoria </title> <meta name="

我正在尝试制作一个导航栏，它既有一个始终可见的下拉菜单，也有一个折叠菜单。这在桌面浏览器上运行良好，但在我的手机（android 2.3.6）上不起作用。代码如下：

<!DOCTYPE html>
<html lang="es">
 <head>
  <meta charset="utf-8">
  <title>Pizzeria &amp; 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>&nbsp;</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 &amp; 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">&copy; </div>
    </div>
   </footer>
  </div> <!-- /container -->
 </body>
</html>


比萨店；餐厅
//
文本。。。。















...




&抄袭；

该按钮（三条）在我的android浏览器中不可单击。有没有办法将onclick绑定到按钮，然后展开菜单

非常感谢您的帮助

编辑：我给了可折叠菜单一个ID，并试图用链接切换它：

它适用于桌面浏览器，但不适用于我的android。我还试图从btn导航栏中删除

style=“float:left；”“

，但同样没有成功

已解决：

我猜我删除了三个引导脚本bootstrap-modal.js、bootstrap-dropdown.js和bootstrap-collapse.js，并添加了完整的bootstrap.min.js。现在很有魅力。显然android需要额外的功能

如问题中所述，解决方案是删除3个单独的jQuery插件，并用bootstrap.min.js替换它们

我建议@Ollie自己发布答案并接受他的答案

这个问题与未回答部分无关。

我遇到了相同的问题，发现包含在下面的所有bootstrap-*.js文件都可以替换为bootstrap.js

简单的答案是取代这个：

    <script src="js/jquery.js"></script>
    <script src="js/bootstrap-transition.js"></script>
    <script src="js/bootstrap-alert.js"></script>
    <script src="js/bootstrap-modal.js"></script>
    <script src="js/bootstrap-dropdown.js"></script>
    <script src="js/bootstrap-scrollspy.js"></script>
    <script src="js/bootstrap-tab.js"></script>
    <script src="js/bootstrap-tooltip.js"></script>
    <script src="js/bootstrap-popover.js"></script>
    <script src="js/bootstrap-button.js"></script>
    <script src="js/bootstrap-collapse.js"></script>
    <script src="js/bootstrap-carousel.js"></script>
    <script src="js/bootstrap-typeahead.js"></script>

为此：

    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>

Boostrap.min.js（或仅Boostrap.js）包含其他人单独调用的所有脚本。

当您找到自己问题的解决方案时，应将其作为答案发布并接受。