css - 在 bootstrap 下拉菜单中添加平滑过渡

Question

我在 angularjs 上使用 bootstrap 3。不知道我错过了什么。当我点击它时，它不会平滑地向下/向上滑动，而是快速显示。我正在尝试实现类似于 Accordion 的效果。

<li class="dropdown" id="printerAnalyticsMenu">
    <a href="#" class="dropdown-toggle">
        <i class="fa fa-bar-chart-o"></i>
        <span class="hidden-xs">Printer Analytics</span>
    </a>
    <ul class="dropdown-menu">
        <li><a class="ajax-link" ui-sref="main.odometer">Odometers</a></li>
        <li><a class="ajax-link" href="#">Real Time Print Job</a></li>
        <li><a class="ajax-link" href="#">Battery</a></li>
        <li><a class="ajax-link" href="#">Printhead</a></li>
    </ul>

和CSS

li#printerAnalyticsMenu > ul > li {
    /* this will apply to inner UL, adapt to your desired selector */
    -webkit-transition: height 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out;
    -moz-transition: height 0.3s ease-in-out;
    transition: height 0.3s ease-in-out;
}

Answer 1

我自己使用下拉菜单已经有一段时间了。但是试试这个:

li#printerAnalyticsMenu:hover ul {
    -webkit-transition: height 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out;
    -moz-transition: height 0.3s ease-in-out;
    transition: height 0.3s ease-in-out;
}

免责声明:我不熟悉您使用的这个功能，但这是我通常显示下拉菜单的方式。