Question

我正在尝试使用两个导航栏，一个始终可见的下拉菜单和一个折叠菜单。这适用于桌面浏览器，但不适用于我的手机（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，并尝试使用链接切换它：<a href="#" onclick="$('#mencol').collapse('toggle')">toggle menu</a> 它适用于桌面浏览器，但不适用于我的Android。我还试图从btn-navbar中删除style="float:left;"，但再次没有成功。

解决：猜测我删除了三个bootstrap javascripts bootstrap-modal.js，bootstrap-dropdown.js和bootstrap-collapse.js并添加了完整的bootstrap.min.js。现在就像一个魅力。显然android需要额外的功能......

Answer 1

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

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

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

Answer 2

我遇到了同样的问题，发现所有引导程序 - * .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）包含其他人单独调用的所有脚本。

折叠的菜单按钮在Android浏览器上无法点击

2 个答案: