[英]Bootstrap dropdown menu not displaying on mouseover / click
这是下拉部分的 HTML:
<li class="dropdown">
<a class="dropdown-toggle" href="/contact-us">Contact Us <i class="fa fa-angle-down hidden-xs hidden-sm"></i></a>
<a class="visible-xs visible-sm dropdown-menu-xs" href="#" data-toggle="dropdown"><i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="/contact-us/testpage">testpage</a></li>
<li><a href="/contact-us/testpage2">testpage2</a></li>
</ul>
</li>
它看起来像这样:
当我将鼠标悬停在它上面时没有任何反应,单击它会将我带到联系我们页面。
我应该拥有所有必要的 JS 文件:
<script src="/js/plugins/jquery.1.11.0.js"></script>
<script src="/js/plugins/bootstrap.min.js"></script>
<script src="/js/plugins/bootstrap-dialog.min.js"></script>
<script src="/js/owl.carousel.js"></script>
<script src="/js/custom.js"></script>
<script src="/js/validate.js"></script>
<script type="text/javascript" src="/js/plugins/sticky-tabs.min.js"></script>
<script src="/js/plugins/jquery.select2list.min.js"></script>
不知道我哪里出错了。
编辑 - 在控制台中收到此错误:
不知道是什么原因造成的,那里没有 HTML
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Contact Us <i class="fa fa-angle-down hidden-xs hidden-sm"></i></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
您的代码中几乎没有错误。
你没有给你的按钮提供 id。
按钮缺少数据切换=“下拉”
您没有在 ul 中使用 aria-labelledby 属性。
签出这个片段。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <li class="dropdown"> <a class="btn btn-default dropdown-toggle" id="dropdownMenu" data-toggle="dropdown">Contact Us <i class="fa fa-angle-down hidden-xs hidden-sm"></i></a> <a class="visible-xs visible-sm dropdown-menu-xs" href="#" data-toggle="dropdown"><i class="fa fa-angle-right"></i></a> <ul class="dropdown-menu" aria-labelledby="dropdownMenu"> <li><a href="/contact-us/testpage">testpage</a></li> <li><a href="/contact-us/testpage2">testpage2</a></li> </ul> </li>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.