Bootstrap dropdown not working

2019-01-21 18:43发布

站内问答 / 后端开发
1206 15 4

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

<ul class='nav'>
  <li class='active'>Home</li>
  <li class='dropdown'>
    <a class="dropdown-toggle" data-toggle="dropdown" href='#'>Personal asset loans</a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">asds</a></li>
      <li class="divider"></li>
    </ul>
  </li>
  <li>Payday loans</li>
  <li>About</li>
  <li>Contact</li>
</ul>

And here are the scripts:

<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script>
<script>
     $(document).ready(function(){
        $('.dropdown-toggle').dropdown()
    });
</script>

What am I doing wrong? Thanks for your answers!

15条回答
霸刀☆藐视天下
2楼-- · 2019-01-21 18:48

Add following lines within the body tags.

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://code.jquery.com/jquery.js"></script>
  <!-- Include all compiled plugins (below), or include individual files 
        as needed -->
  <script src="js/bootstrap.min.js"></script>
查看更多
0人赞 添加讨论(0) 举报
干净又极端
3楼-- · 2019-01-21 18:55

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) 举报
Evening l夕情丶
4楼-- · 2019-01-21 18:55

I had the same issue which brought me here.

My Issue : I was using the recommended jquery 1.12.0 version as my jquery script file.

Solution : replaced the jquery script with jquery 2.2.0 version.

That solved it for me.

查看更多
0人赞 添加讨论(0) 举报
再贱就再见
5楼-- · 2019-01-21 18:56

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) 举报
不美不萌又怎样
6楼-- · 2019-01-21 18:57

you have to import this files into the <head></head> of your html.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
查看更多
0人赞 添加讨论(0) 举报
走好不送
7楼-- · 2019-01-21 18:57

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) 举报
1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)