Question

我在angularjs上使用bootstrap 3。不知道我错过了什么。当我点击它时，它不会平滑地向下/向上滑动，而是快速显示。我试图达到类似手风琴的效果。

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

免责声明：我不熟悉您正在使用的此功能，但我通常会显示下拉菜单。

在bootstrap下拉列表中添加平滑过渡

1 个答案: