引导下拉导航栏不起作用

Question

我遇到了引导下拉菜单的问题

这是我的完整代码 https://github.com/PowerChaos/kb/

简单解释

 <!-- bootstrap -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

如果我将 jquery.js 切换到 bootstrap.js 上方，则顶部导航栏下拉菜单不起作用

下面是脚本中的一些函数，用于查看谁登录并根据登录名显示 (u()) (a()) and (s()) are functions to user/staff/admin sessions

下面侧边栏的html代码

<?php
if (u())
{
?>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#header">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="../home">Knowledge Base</a>
    </div>
    <div class="collapse navbar-collapse" id="header">
        <div class="col-sm-3 col-md-3">
            <form class="navbar-form" role="search">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search" name="q">
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                    </div>
                </div>
            </form>
        </div>
      <ul class="nav navbar-nav navbar-right">
              <?php
      if (s())
      {
?>      
        <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Post Menu
        <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
        <li><a href="../s/nieuw">Nieuwe Post</a></li>
        <li><a href="../s/bewerk">Bewerk Post</a></li>
        <li><a href="../s/lijst">zie all posten</a></li>        
        </ul>
      </li>
<?php       
      }
      ?>
          <?php
      if (a())
      {

?>                  
        <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Admin Menu
        <span class="caret"></span></a>
        <ul class="dropdown-menu">                  
        <li><a href="../a/gebruikers">Gebruikers</a></li>
        </ul>
      </li>
<?php       
      }
      ?>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><?php echo $_SESSION['naam'] ?>
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="../pass">wachtwoord</a></li>
          <li><a href="../logout">Log Uit</a></li> 
        </ul>
      </li>
      </ul>
    </div>
  </div>
</nav>
    <!-- Dynamic SiteBar -->
<div class="navbar-fixed-left">
<ul id="tree1">
<?php
require(getenv("DOCUMENT_ROOT")."/functions/database.php");
    try{    
$stmt = $db->prepare("SELECT * FROM hc");
$stmt->execute();
$result = $stmt->fetchall(PDO::FETCH_ASSOC);

}//end try
    catch(Exception $e) {
    echo '<h2><font color=red>';
    var_dump($e->getMessage());
    die ('</h2></font> ');
}
    foreach($result as $info) {
echo "<li>$info[naam]";
echo "<ul>";

    try{
$hc = $info[id];        
$stmthc = $db->prepare("SELECT * FROM shc where hc =:hc");
$stmthc->execute(array(':hc' => $hc));
$resultsub = $stmthc->fetchall(PDO::FETCH_ASSOC);

}//end try
    catch(Exception $e) {
    echo '<h2><font color=red>';
    var_dump($e->getMessage());
    die ('</h2></font> ');
}

foreach($resultsub as $sub) {
echo "<li>$sub[naam]";
echo "<ul>";

    try{
$subhc = $sub[id];      
$stmtsubhc = $db->prepare("SELECT * FROM posts where shc =:subhc");
$stmtsubhc->execute(array(':subhc' => $subhc));
$resultpost = $stmtsubhc->fetchall(PDO::FETCH_ASSOC);

}//end try
    catch(Exception $e) {
    echo '<h2><font color=red>';
    var_dump($e->getMessage());
    die ('</h2></font> ');
}

foreach($resultpost as $post) {
echo "<li><a href='../post/$post[id]'>$post[naam]</a></li>";
}
echo "</ul>";
}
echo "</li>";
echo "</ul>";
echo "</li>";
}
?>
</ul>           
</div>
<!-- Dynamic SiteBar -->    
<?php
}
?>
        <!-- Page Content -->
        <div id="page-content-wrapper">
            <div class="container-fluid">
            <div class="container content">

Answer 1

使用 jquery 1.11.1 版本并将脚本放在链接之前：

<script src="jquery/jquery-1.11.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="bootstrap/css/styles.css"/> 

Answer 2

引导下拉菜单的工作原理概述

当您单击 dropdown-toggle 元素时，bootstrap 会向其父元素添加一个名为 open 的类，这就是使其可见的原因。

无法正常工作的原因

由于某种奇怪的原因，您的下拉菜单在单击时没有打开课程。当我在调试器中明确添加该类时，它可以工作。

解决方案

您可以编写自己的代码，将“open”类添加到下拉列表中，如下所示：

$('.dropdown-toggle').click(function(){
  var parent = $(this).parent();
  if(parent.hasClass('open')) { 
    parent.removeClass('open'); 
  } else {
     parent.addClass('open');
  }
});

在初始化树视图后或bootstrap.js 之后的任何地方添加此内容