我的 javascript .dropdown-toggle() Bootstrap 函数在下拉并再次单击它后没有关闭。
我已经检查了 SO 上的所有其他问题(有很多),但没有任何效果。
JS:
<script type="text/javascript">
$(document).ready(function(){
$(".dropdown-toggle").dropdown();
});
</script>
PHP:
<?php
if($_SESSION['admin'] == 1) {
echo "<div class=\"bs-e\">";
echo "<div class=\"dropdown\">";
echo "<a href=\"#\" class=\"dropdown-toggle\">Options <b class=\"c\"></b></a>";
echo "<ul class=\"dropdown-menu\">";
echo "<li><a href=\"pa.php\">P A</a></li>";
echo "<li><a href=\"aED.php\">A T</a></li>";
echo "<li><a href=\"p_a_d.php\">D D</a></li>";
echo "<li class=\"divider\"></li>";
echo "<li><a href=\"logOut.php\">L O</a></li>";
echo "</ul>";
echo "</div>";
echo "</div>";
}
else {
echo "<button value=\"L O\" onclick=\"window.location='lO.php'\" class=\"submit\" style=\"margin-left:420px;margin-bottom:10px;\">Log Out </button>";
}
?>
我希望当我第二次单击该按钮时它返回到原始状态。
最佳答案
我已经调整了您的 HTML,使其更类似于 Bootstrap 文档使用的内容。我添加了属性 role="menu"
给您<ul>
(这不是修复它的原因,但您仍然应该包含它)并添加了属性 data-toggle="dropdown"
到<a>
触发了下拉菜单。如果没有这个,Bootstrap JS 就不知道如何处理下拉菜单。这是一个工作的 jsFiddle - http://jsfiddle.net/djrp5/
这是实际的代码
<div class="bs-e">
<div class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Options <b class="c"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a href="pa.php">P A</a></li>
<li><a href="aED.php">A T</a></li>
<li><a href="p_a_d.php">D D</a></li>
<li class="divider"></li>
<li><a href="logOut.php">L O</a></li>
</ul>
</div>
</div>
我承认实际的文档并没有明确说明这一点,但是如果您检查示例,特别是 this one ,您会在那里看到一些可切换的下拉菜单。
关于Javascript .dropdown-toggle() Bootstrap 函数在单击后未关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24152174/