单击后,Javascript .dropdown-toggle()引导功能不会关闭

时间:2014-06-10 22:57:05

标签: javascript jquery html twitter-bootstrap

我的javascript .dropdown-toggle()引导功能在关闭后不会关闭,我再次点击它。

我已经检查了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>";
    }
?>

当我再次点击按钮时,我希望它恢复到原始状态。

1 个答案:

答案 0 :(得分:2)

我已将您的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,那么您会在那里看到一些可切换的下拉列表。