bootstrap dropdown 下拉菜单无法收缩,怎么解决？

Question

使用bootstrape 插入下拉菜单无法收缩回去，如图所示:

html代码如下，bootstrap csc,js 库和jQuery的库都已经正确的引用

    <div class="dropdown">
         <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
        <div><img src="img/avatar-small.jpg"/></div>
        <span class="caret"></span>
        </button>
         <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">我的主页</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">修改资料</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">个人设置</a>
        </li>    
       </ul>
    </div>
</div>

Answer 1

你的html里只有bootstrap和jquery?

曾经遇到过失效的问题，最终发现是因为别的js库依赖了bootstrap，但是版本比较老，导致了失效。

然后，还要注意引入的顺序，要先引入jQuery，再bootstrap。

Answer 2

您好,我在你的代码中没有发现错误的原因,在自己的ide上试验了一下,没有问题,可以收回.
您可以试着重启一下浏览器,可能是浏览器的解析器出了问题.

Answer 3

因为你的第一个dropdown沾满了一行，你的hover移开事件，得鼠标移开这整个div才会生效。

Answer 4

我这边试了一下你的代码是可以收缩的啊，只是那个样式不太好看

关掉浏览器重新打开试试