下拉菜单上的 jScrollPane 零高度答案

【问题标题】：jScrollPane zero height on dropdown menus下拉菜单上的 jScrollPane 零高度
【发布时间】：2014-04-14 15:57:44
【问题描述】：

我有一些内容显示为 div 中的列表。默认情况下，div 是隐藏的，但一旦它的父级具有“.open”类，它就会变得可见：

<li class="dropdown">
    <a>Options</a>
    <div class="dropdown-menu">
        <div class="menu-scroll">
            <ul>
                <li>...</li>
                <li>...</li>
                <li>...</li>
            </ul>
        </div>
    </div>
</li>

当我单击列表项中的锚点时，会发生什么情况，该列表项会收到 ".open" 类，它可以显示 ".dropdown-menu" 。现在我的问题是我希望该菜单的最大高度为 200px，之后它应该初始化滚动。考虑到它的每个列表项都是 50px 高，我们会有这些场景：

2 个列表项，高度为 100 像素，无滚动
3 个列表项，高度 150 像素，无滚动
4 个列表项，高度为 200 像素，无滚动
5+ 列表项，高度超过 200px 和 SCROLL

这意味着我无法为 .menu-scroll 设置固定高度，因为我希望它可以缩放直到达到那个高度。我要做的是设置：

max-height: 200px;
height: auto;

我第一次触发下拉菜单时它运行良好，但之后它呈现一切错误，如下所示：

我的尝试：

在单击切换 .open 类的锚点时初始化 jScrollpane。
在文档就绪时初始化 jScrollpane，并且仅在单击相同锚点时重新初始化对象。

结果每次都是一样的，如上图所示。我搜索了文档、FAQ、StackOverflow、Google Groups 但无济于事。有人对此有任何线索吗？

编辑：这是我用来触发下拉和初始化滚动的代码：

$('.dropdown-toggle').on("click", function() {
    $(this).parent('.dropdown').toggleClass('open').find('.dropdown-menu').jScrollPane();
});

.open 类所做的是添加

.dropdown.open .dropdown-menu {
    display: block;
}

到原本隐藏的 .dropdown-menu：

.dropdown.dropdown-menu {
    display: none;
}

【问题讨论】：

标签： javascript jquery css drop-down-menu jscrollpane

【解决方案1】：

如果您在第一次触发时正确，然后在此之后失败，则意味着您必须检查您的脚本。您可以在这里发布您的脚本吗？

【讨论】：