bootstrap dropdown not getting "open" class

4
votes

I am trying to make a dropdown button using bootstrap like this:

<div class="btn-group">
<a href="#" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> dropdown </a>

                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                </ul>
</div>

bootstrap inserts "open" class for parent div on clicking the button to show dropdown menu. In my case it doesn't insert "open" class. I tried replacing "btn-group" with "dropdown" but no benefit. It is verified that bootstrap.min.js includes in sources. Many thanks

5
twitter-bootstrap

5 Answers

4
votes

in bootstrap 4 it is show class instead of open

<div class="btn-group">
<a href="#" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> dropdown </a>
 <ul class="dropdown-menu show" role="menu">
   <li><a href="#">Action</a></li>
   <li><a href="#">Another action</a></li>
 </ul>
</div>
3
votes

I had run into this issue. For me, this was caused because the scripts were loaded onto the page a second time in the body. CodeIgniter was passing a variable to the view which was not explicitly passed to the view method, which caused misuse of the framework and a confusing result.

0
votes

Is jQuery included?

This works for me: 

<!DOCTYPE>
<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <link rel="stylesheet" href="bootstrap.min.css">
        <script type="text/javascript" src="bootstrap.min.js"></script>
    </head>
    <body>
        <div class="btn-group">
            <a href="#" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> dropdown </a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
            </ul>
        </div>
    </body>
</html>

Demo

0
votes

In my case I unbind the document on a higher level e.g. $(document).unbind() it will unbind the document from all of the events registered on the document and therefore no event is triggered when click onto dropdown button.

0
votes

Don't forget to add integrity attributes to jquery and cdn scripts. See the below example.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

for more details please read this https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity