莫代尔&在WordPress中升级到Bootstrap v4.0.0-beta后,下拉列表无效

时间:2017-08-23 11:57:10

标签: jquery wordpress twitter-bootstrap

我有以下模态&我的WordPress中的下拉列表在List中正常工作:

模态

v4.0.0-alpha.6

下拉

 <a class="nav-link" data-toggle="modal" data-target="#navLinkSub" aria-
 haspopup="true" aria-expanded="false" href="#">
 Link</a>

 <div class="modal fade" id="navLinkSub" tabindex="-1" role="dialog" aria-
 labelledby="navLinkSub" aria-hidden="true">
 ....
 ...
 ...
 </div>

我没有更改任何在Bootstrap上使用早期版本工作正常的代码,而不是将bootstrap升级到<div class="dropdown"> <button class="btn btn-light dropdown-toggle" type="button" id="navShare" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> share </button> <div class="dropdown-menu" aria-labelledby="navShare"> <button class="dropdown-item" type="button">facebook</button> <button class="dropdown-item" type="button">twitter</button> <button class="dropdown-item" type="button">instagram</button> </div> </div>

以下是jQuery&amp; Bootstrap JS文件按顺序:

v4.0.0-beta

1 个答案:

答案 0 :(得分:2)

和模态下拉列表代码看起来很好。尝试重新安排脚本。 Jquery,Popper.js然后bootstrap.js。此外,您必须在之后链接它们的任何外部脚本。不要改变它的工作顺序。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

工作JSFiddle:https://jsfiddle.net/pp9pdjtv/ 脚本位于屏幕左侧的外部资源标签中。

编辑:似乎您的脚本是有序的。有一个或两个脚本可能较旧并且会导致某种兼容性问题。所以,如果我的第一个修复不适合你,只需从src =&#34;&#34;中获取脚本。使用快捷键ctrl-s标记并将它们保存到目录中。然后按照我之前说明的顺序链接它们,并确保获得正确的脚本名称。