Question

我正在开发一个快速响应的网站。我们正在Yii框架内和现有的（自建）多网店平台内构建此功能。我正在尝试使用Bootstrap实现下拉菜单。

我使用了Bootstrap网站上的代码： http://getbootstrap.com/components/#navbar

代码位于div中，类名为“main-wrapper”

我只加载以下js文件：jQuery，bootstrap-dropdown和bootstrap-collapase（当我加载所有内容时我的问题也出现了）

问题： 现在出现了问题。当我在我的浏览器上测试它时工作正常，但当我使用我的手机时，我点击下拉列表直接关闭它。感觉它按两次按钮。如果我按下大约一秒钟或2秒钟，它会保持打开状态。我的手机是三星Galaxy S3（安卓4.3）。我在其他手机上测试过它（包括一个S3 mini，没有同事似乎有一个星系S3），一切正常。所以我觉得我手机里面的一些传感器坏了，但是当我去自举网站时它确实有效（我在网站上使用的代码相同）。

也许有人会重新解决这个问题而我只是错过了一些东西，但是这个很难调试。我已经将代码限制为绝对最小值。

注意：只是为了说清楚。只需打开下拉菜单而不点击其他任何地方，它会立即再次关闭。

我的代码（这是所有代码，我删除了其他所有内容。显然有一些Yii文件被加载，但没有其他JS / Css文件）

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title><?= CHtml::encode($this->pageTitle); ?></title>
        <meta name="description" content="<?= CHtml::encode($this->pageDescription); ?>" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="http://local.bedruktet-shirts.com/themes/bedruktet-shirts.com/bootstrap/css/bootstrap.css" rel="stylesheet">
   </head>
   <body>   
      <div class="main-wrapper">   
      <!-- navbar-fixed-top -->
      <nav class="navbar navbar-default" role="navigation">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
              <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
              </form>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>
    </div>
    <script src="http://local.bedruktet-shirts.com/themes/bedruktet-shirts.com/bootstrap/js/jquery.js" type="text/javascript"></script> 
    <script src="http://local.bedruktet-shirts.com/themes/bedruktet-shirts.com/bootstrap/js/bootstrap-dropdown.js" type="text/javascript"></script>
    <script src="http://local.bedruktet-shirts.com/themes/bedruktet-shirts.com/bootstrap/js/bootstrap-collapse.js" type="text/javascript"></script>
  </body>
</html>

Answer 1

我＆＃34;解决了＃34;我自己的问题...我升级了bootstrap。是的......就是这样。有人添加了bootstrap，我问他是否是最新版本。所以我认为这是真的。但是，我有第二个问题，在移动设备上无法正常工作。所以我想检查版本号。

我添加了最新版本的bootstrap以及一切奇怪的＆＃39;工作。不会删除这个问题并隐藏我的愚蠢。如果他们碰巧遇到这个问题，请将其作为提醒他人检查版本。

Bootstrap下拉列表直接在我的手机上关闭，仅在我自己的网站上

1 个答案: