javascript - 在li内使用dropit.js，导致列表折叠后消失

如果您将其放置在下拉菜单中，然后将其包装在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/

最佳答案

这是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具有open github issue for this scenario

修复

在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。

关于javascript - 在li内使用dropit.js，导致列表折叠后消失，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29655710/