bootstrap dropdown not getting "open" class

Question

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

kerbrose · Accepted Answer · 2019-06-09 08:09:32Z

5

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>

answered Jun 9, 2019 at 8:09

kerbrose

1,2052 gold badges14 silver badges25 bronze badges

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

Comments

avatarofhope2 · Accepted Answer · 2018-03-06 19:22:33Z

3

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.

answered Mar 6, 2018 at 19:22

avatarofhope2

1721 silver badge11 bronze badges

Comments

Fred · Accepted Answer · 2014-03-29 19:15:56Z

0

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

answered Mar 29, 2014 at 19:15

Fred

9591 gold badge10 silver badges22 bronze badges

Comments

umer · Accepted Answer · 2019-04-04 08:53:56Z

0

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.

answered Apr 4, 2019 at 8:53

umer

1,3261 gold badge18 silver badges36 bronze badges

Comments

Aamer Shahzad · Accepted Answer · 2020-06-18 18:00:26Z

0

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

answered Jun 18, 2020 at 18:00

Aamer Shahzad

2,9971 gold badge30 silver badges32 bronze badges

Collectives™ on Stack Overflow

bootstrap dropdown not getting "open" class

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

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related