鼠标悬停/单击时不显示Bootstrap下拉菜单

时间：2015-09-28 09:36:59

标签： javascript jquery html css twitter-bootstrap

以下是下拉部分的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>

它看起来像这样：

enter image description here

鼠标悬停时没有任何反应，单击它会将我带到联系我们页面。

我应该拥有所有必要的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>

不知道我哪里出错了。

编辑 - 在控制台中收到此错误：

enter image description here

不确定是什么造成的，但那里没有HTML

2 个答案:

答案 0 :(得分：-1)

<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>

工作小提琴 https://jsfiddle.net/DTcHh/

答案 1 :(得分：-1)

您的代码中的错误很少。

  1. 您没有为您的按钮提供ID。

  2. 从按钮

    3. 缺少data-toggle =“下拉列表”

  3. 您没有在ul。

    4. 中使用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>

相关问题
最新问题