3

I am trying to make a nav bar with both, a dropdown-menu which is always visible and a collapsed menu. This works fine on desktop browsers but not on my mobile (android 2.3.6). Here is the code:

<!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>

The button (three bars) is not clickable in my android browser. Is there a way to bind a onclick to the button which then expands the menu?

Any help is greatly appreciated.

Edit: I gave the collapsible menu an ID and tried to toggle it with a link: <a href="#" onclick="$('#mencol').collapse('toggle')">toggle menu</a> It works on desktop browsers but not on my android. I also tried to remove the style="float:left;" from the btn-navbar, again without success.

SOLVED: On a guess I removed the three bootstrap javascripts bootstrap-modal.js, bootstrap-dropdown.js and bootstrap-collapse.js and added the complete bootstrap.min.js. Works like a charm now. Obviously android needs additional functions...

4

2 に答える 2

1

質問で説明したように、解決策は 3 つの個別の jQuery プラグインを削除し、それらを bootstrap.min.js に置き換えることでした。

@Ollie は、自分で回答を投稿し、彼の回答を受け入れることをお勧めします。

この質問は、未回答のセクションでは関係ありません。

于 2012-06-15T07:27:03.243 に答える
0

私は同じ問題に遭遇し、すぐ下に含まれているすべての 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) には、他のスクリプトが個別に呼び出すすべてのスクリプトが含まれています。

于 2013-05-31T17:11:51.057 に答える