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

bybem2ql 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(178)

我正在尝试做一个导航栏，一个下拉菜单总是可见和折叠菜单.这在桌面浏览器上工作得很好，但在我的移动的（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>它可以在桌面浏览器上运行，但不能在我的安卓系统上运行。我也试着从btn-navbar中删除style="float:left;"，但还是没有成功。
解决：我猜我删除了三个引导javascript bootstrap-modal.js，bootstrap-dropdown.js和bootstrap-collapse.js，并添加了完整的bootstrap.min.js。现在工作起来像一个魅力。显然android需要额外的功能...

twitter-bootstrap

来源：https://stackoverflow.com/questions/10869754/collapsed-menu-button-not-clickable-on-android-browser

2条答案

按热度按时间

aij0ehis1#

正如问题中所解释的，解决方案是删除3个单独的jQuery插件，并将其替换为bootstrap.min.js
我建议@奥利自己发布答案，并接受他的答案。
这个问题在未回答部分没有任何关系。

赞(0）回复(0）举报 2022-12-07

vxbzzdmp2#

我遇到了同样的问题，发现下面包含的所有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）包含其他脚本单独调用的所有脚本。

赞(0）回复(0）举报 2022-12-07

我来回答

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

2条答案

相关问题

热门标签

最新问答