PowerChaos PowerChaos - 2 months ago 4
CSS Question

bootstrap dropdown navbar not working

i got a problem with bootstrap dropdown

here is my full code
https://github.com/PowerChaos/kb/

to explain it easy

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


if i switch the jquery.js above bootstrap.js , then the top navbar dropdown does not work

below are some functions in the script to see who is logged in and display based on login
(u()) (a()) and (s()) are functions to user/staff/admin sessions


html code of sidebar below

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

Overview of how bootstrap dropdown works

When you click the dropdown-toggle element, bootstrap adds a class called open to its parent element & that's what makes it visible.

Reason why its not working

For some reason which is weird, your dropdown is not getting the class open on it when clicked. When I explicitly add the class in the debugger it works.

Solution

You can write your own piece of code which adds the class "open" to the dropdown like so:

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

Add this after you initialise your treeviews or anywhere after bootstrap.js

Comments