下拉引导程序在移动设备中不起作用答案

【问题标题】：dropdown bootstrap not working in mobile下拉引导程序在移动设备中不起作用
【发布时间】：2018-04-23 22:34:28
【问题描述】：

我的网站中的下拉菜单在桌面上工作，但在移动视图中失败。以下是我创建的网站示例：http://www.pakarraya.com/dropdown/

根据各种参考资料中的一些引导下拉菜单示例，这是我编写的脚本：

 <div class="navigation collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="current"><a href="#intro">Home</a></li>
      <li><a href="#about">About</a></li>
      <li class="dropdown">
           <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu Dropdown<span class="caret"></span></a>
           <ul class="dropdown-menu">
               <li><a href="#about">Dropdown 1</a></li>
               <li><a href="#portfolio">Dropdown 2</a></li>
               <li><a href="#contact">Dropdown 3</a></li>
           </ul>
      </li>
      <li><a href="#contact">Contact</a></li>
     </ul>
  </div>

恳请各位高手解决，非常感谢

【问题讨论】：

标签： php twitter-bootstrap drop-down-menu

【解决方案1】：

This will perfectly solves your problem please check i have uploaded screen shot also


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
</style>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

</head>
<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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 navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">

          <li class="current"><a href="#intro">Home</a></li>
          <li><a href="#about">About</a></li>
          <li class="dropdown-menu">
               <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu Dropdown<span class="caret"></span></a>
               <ul class="dropdown-menu">
                   <li><a href="#about">Dropdown 1</a></li>
                   <li><a href="#portfolio">Dropdown 2</a></li>
                   <li><a href="#contact">Dropdown 3</a></li>
               </ul>
          </li>
      <li><a href="#contact">Contact</a></li>
     </ul>


    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

</body>
</html>



Output

[![screenshot][1]][1]

【讨论】：

致巴斯卡·雷迪先生。感谢您的回复，我已经尝试了您提供的应用程序并且它运行良好，但是在我尝试在我的网站上执行后，它无法运行。这是否与 css 或 js 文件或其他内容冲突。请了解更多信息，谢谢
Js 与此无关，只需检查 ul 与使用的类