发表新帖
发表新帖

Bootstrap dropdown not working

前端 未结
关注
24 1006
孤城傲影
孤城傲影 2020-12-07 18:05

I can\'t make bootstrap dropdown to work. Here is my html for nav:

    
  
  • Home
    • 
  
  •
相关标签:
24条回答
  • 故里飘歌
    2020-12-07 19:00

    Have you included jquery.js ?

    Also, compare this line of code with yours:

    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans<b class="caret"></b></a>

    See this version that works ok.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bootstrap dropdown</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <ul class="nav">
                    <a class="brand" href="#">w3resource</a>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li class="dropdown" id="accountmenu">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">MySQL</a></li>
                            <li class="divider"></li>
                            <li><a href="#">JavaScript</a></li>
                            <li><a href="#">HTML5</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container-fluid">
     <h1>Dropdown Example</h1>
    </div>
    <script type="text/javascript" src="js/jquery-latest.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });
   </script>
</body>
</html>
    0 讨论(0)
  • 一个人的身影
    2020-12-07 19:00

    I had setup with Angular 7, jQuery 3.4.1, Popper 1.12.9 and Bootstrap 4.3.1, nothing was working for me unitll I did this little hack in styles:

    .dropdown.show .dropdown-menu {
    opacity: 1 !important;
}

    Html looks like this:

    <nav class="navbar navbar-expand-lg navbar-dark fixed-top py-1">
 <div class="container-fluid">
    <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" id="dropdown-id"
                aria-expanded="false">Menu</button>
            <div class="dropdown-menu" aria-labelledby="dropdown-id">
                <a class="dropdown-item" [routerLink]='["/"]'>Main page</a>
                <a class="dropdown-item" [routerLink]='["/about"]'>About</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" [routerLink]='["/about/terms"]'>Terms</a>
                <a class="dropdown-item" [routerLink]='["/about/privacy"]'>Privacy</a>
            </div>
        </li>
     </ul>
  </div>
</nav>
    0 讨论(0)
  • 醉话见心
    2020-12-07 19:02

    Both bootstrap and jquery must be included:

    <link type="text/css" href="/{ProjectName}/css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/jquery-x.x.x.custom.min.js"></script>

<link type="text/css" href="/{ProjectName}/css/bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/bootstrap.js"></script>

    NOTE: jquery-x.x.x.min.js version must be version 2.x.x !!!

    0 讨论(0)
  • 栀梦
    2020-12-07 19:03

    Copy-paste below jQuery <script> and stylesheet <link> into your <head> to make sure you're loading all necessary files.

    It's important that your JQuery .js file is above .css stylesheet

    Simply paste the following line to test

    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    The problem occurs mostly with loading of jQuery script, make sure you add references correctly.

    Now test

    Still if it doesn't work, check bootstrap website they've a sample implementation.

    https://getbootstrap.com/docs/4.3/components/navbar/#supported-content

    0 讨论(0)
  • 野的像风
    2020-12-07 19:05

    FYI: If you have bootstrap.js, you should not add bootstrap-dropdown.js.

    I'm unsure of the result with bootstrap.min.js.

    0 讨论(0)
  • 难免孤独
    2020-12-07 19:06

    Try this in the head section

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    0 讨论(0)
 看不清?
提交回复
热议问题