我的WordPress中有以下Modal&Dropdown,在以下方面运行良好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>
落下
<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>
与将bootstrap升级到相比,我没有更改任何可在Bootstrap的早期版本上正常工作的代码v4.0.0-beta
。
以下是jQuery&Bootstrap JS文件的顺序:
<script src="......../assets/js/jquery-3.2.1.min.js?ver=3.2.1"></script>
<script src="......../assets/bs/js/bootstrap.min.js?ver=20170722"></script>
和modal下拉代码看起来不错。尝试重新排列脚本。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 =“”标记中获取脚本,然后使用快捷键ctrl-s将它们保存到目录中。然后按照我之前所述的顺序链接它们,并确保您获得正确的脚本名称。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句