单击后 Javascript .dropdown-toggle() Bootstrap 函数未关闭

Question

我的 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>";
    }
?>

我希望它在我第二次单击按钮时恢复到原来的状态。

Answer 1

我已经调整了您的 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 ，您会在那里看到一些可切换的下拉菜单。