我正在为我的PHP课程制作一个示例项目，我有一个带有2个下拉菜单的侧边栏导航。每当我点击下拉按钮时，该菜单的列表项目就会消失。你可以看到下面的gif，看看到底发生了什么。
这是下面的代码，它只是侧面导航。所有其他部分，如页眉，页脚和内容都在其他页面中，并使用PHP的include（）函数包含在索引文件中。
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="index.php">CMS Admin</a>
</div>
<!-- Top Menu Items -->
<ul class="nav navbar-right top-nav">
<li><a href="../index.php">Visit Website</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i>
<?php
if(isset($_SESSION['username']))
{
echo $_SESSION['username'];
}
?>
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="#"><i class="fa fa-fw fa-user"></i> Profile</a>
</li>
<li class="divider"></li>
<li>
<a href="../includes/logout.php"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
</li>
</ul>
</li>
</ul>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li>
<a href="index.php"><i class="fa fa-fw fa-dashboard"></i> Dashboard</a>
</li>
<li>
<a href="javascript:;" data-toggle="collapse" data-target="#posts_dropdown"><i class="fa fa-fw fa-sticky-note"></i>Posts <i class="fa fa-fw fa-caret-down"></i></a>
<ul id="posts_dropdown" class="collapse">
<li>
<a href="./posts.php"> View All Posts</a>
</li>
<li>
<a href="posts.php?source=add_post">Add Posts</a>
</li>
</ul>
</li>
<li>
<a href="./cats.php"><i class="fa fa-fw fa-sitemap"></i> Categories</a>
</li>
<li class="">
<a href="comments.php"><i class="fa fa-fw fa-comments"></i> Comments</a>
</li>
<li>
<a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-users"></i> Users <i class="fa fa-fw fa-caret-down"></i></a>
<ul id="demo" class="collapse">
<li>
<a href="users.php">View All Users</a>
</li>
<li>
<a href="users.php?source=add_user">Add User</a>
</li>
</ul>
</li>
<li>
<a href="profile.php"><i class="fa fa-fw fa-user-circle-o"></i> Profile</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
答案 0 :(得分：0)
检查你的脚本和链接标签，它运行正常，这是一个简短的代码示例：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="index.php">CMS Admin</a>
</div>
<!-- Top Menu Items -->
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li>
<a href="index.php"><i class="fa fa-fw fa-dashboard"></i> Dashboard</a>
</li>
<li>
<a href="javascript:;" data-toggle="collapse" data-target="#posts_dropdown"><i class="fa fa-fw fa-sticky-note"></i>Posts <i class="fa fa-fw fa-caret-down"></i></a>
<ul id="posts_dropdown" class="collapse">
<li>
<a href="./posts.php"> View All Posts</a>
</li>
<li>
<a href="posts.php?source=add_post">Add Posts</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-users"></i> Users <i class="fa fa-fw fa-caret-down"></i></a>
<ul id="demo" class="collapse">
<li>
<a href="users.php">View All Users</a>
</li>
<li>
<a href="users.php?source=add_user">Add User</a>
</li>
</ul>
</li>
<li>
<a href="profile.php"><i class="fa fa-fw fa-user-circle-o"></i> Profile</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>