在 LI 内部使用 dropit.js会导致列表在折叠后消失

Question

如果你拿一个下拉菜单，并将其包装在LI中，一旦折叠，它就会消失。有谁知道如何解决这个问题？

<li>
    <ul class="menu">
        <li>
        <a href="#">Dropdown</a>
            <ul>
                <li><a href="#">Some Action 1</a></li>
                <li><a href="#">Some Action 2</a></li>
                <li><a href="#">Some Action 3</a></li>
                <li><a href="#">Some Action 4</a></li>
            </ul>
        </li>
    </ul>
<li>

.JS

$(document).ready(function() {
    $('.menu').dropit();
});

小提琴：https://jsfiddle.net/c5zv3of2/

Answer 1

这是dropit中的一个错误。

看看你在 chrome 开发工具中的小提琴，当你点击包装的下拉菜单时，dropit 正在将"dropit-open"类添加到包装 LI 中，所以你最终会得到下面的 html：

<li class="dropit-open">
    <ul class="menu dropit">
        <li class="dropit-trigger dropit-open">
        <a href="#">Dropdown</a>
            <ul class="dropit-submenu" style="">
                <li><a href="#">Some Action 1</a></li>
                <li><a href="#">Some Action 2</a></li>
                <li><a href="#">Some Action 3</a></li>
                <li><a href="#">Some Action 4</a></li>
            </ul>
        </li>
    </ul>
</li>

当您单击关闭的菜单时，dropit 中的以下代码.js将删除类并隐藏 UL 而不仅仅是 LI。

$(this).parents(settings.triggerParentEl).removeClass('dropit-open').find(settings.submenuEl).hide();

这将产生以下 html。UL上的style="display: none;"是罪魁祸首。

<li class="">
    <ul class="menu dropit" style="display: none;">
        <li class="dropit-trigger">
        <a href="#">Dropdown</a>
            <ul class="dropit-submenu" style="display: none;">
                <li><a href="#">Some Action 1</a></li>
                <li><a href="#">Some Action 2</a></li>
                <li><a href="#">Some Action 3</a></li>
                <li><a href="#">Some Action 4</a></li>
            </ul>
        </li>
    </ul>
</li>

这很可能是由于dropit本身的错误。

事实上，dropit 对于这种情况有一个开放的 github 问题

修复

在 dropit.js 中，更改

$(this).parents(settings.triggerParentEl).removeClass('dropit-open').find(settings.submenuEl).hide();

自

$('.dropit-open').removeClass('dropit-open').find('.dropit-submenu').hide();

这将从所有 LI 中删除 dropit-open 类，但仅隐藏实际位于子菜单下的 LI。