Question

我遇到了bootstrap下拉的问题

这是我的完整代码 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

引导程序下拉列表的工作原理

当您单击dropdown-toggle元素时，bootstrap会将一个名为 open 的类添加到其父元素＆amp;是什么使它可见。

无效的原因

由于某种奇怪的原因，你的下拉列表在点击时没有让它打开。当我在调试器中显式添加类时，它可以工作。

<强>解决方案

您可以编写自己的代码，添加类＆＃34;打开＆＃34;像这样下拉：

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

在初始化树视图后或bootstrap.js

之后的任何位置添加此项

Answer 2

使用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"/>

bootstrap下拉导航栏无法正常工作

2 个答案: