2

My javascript .dropdown-toggle() bootstrap function isn't closing after it has dropped down and I click it again.

I've checked all the other questions on SO (there are a lot), but nothing works.

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

I want it to go back to its original state when I click the button a second time.

Improve this question
3
  • Setup a JSFiddle as an example or give us the html... jsfiddle.net Commented Jun 10, 2014 at 23:02
  • I updated it so it shows the php. Commented Jun 10, 2014 at 23:51
  • Is this a bad question? How can I rephrase it to be more clear? Commented Jun 11, 2014 at 0:43

1 Answer 1

Reset to default
2

I've adapted your HTML to more closely resemble what the Bootstrap docs use. I've added the attribute role="menu" to your <ul> (this isn't what fixed it but you should still include it) and also added the attribute data-toggle="dropdown" to the <a> that triggered the dropdown. Without this the Bootstrap JS didn't quite know what to do with the dropdown. Here is a working jsFiddle - http://jsfiddle.net/djrp5/

And here's the actual code

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

I'll admit that the actual documentation does not make this clear, however if you check the examples, specifically this one, you'll see some toggle-able dropdowns there.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.