javascript - 列表展开时可嵌套2展开按钮不隐藏

Question

我正在尝试在 .net 核心 mvc 应用程序中实现 nestable2.js，但我无法在展开列表时隐藏展开按钮。但是，该列表确实按预期展开和折叠。

修改元素时似乎没有修改按钮类“dd-expand”。

        <div class="cf nestable-lists">
        <div class="dd" id="nestable">
            <ol class="dd-list">
                <li class="dd-item" data-id="1">
                    <div class="dd-handle">Item 1</div>
                </li>
                <li class="dd-item" data-id="2">
                    <div class="dd-handle">Item 2</div>
                </li>
                <li class="dd-item dd-collapsed" data-id="3">
                    <button class="dd-collapse" data-action="collapse" type="button">Collapse</button>
                    <button class="dd-expand" data-action="expand" type="button">Expand</button>
                    <div class="dd-handle">Item 3</div>
                    <ol class="dd-list">
                        <li class="dd-item" data-id="4">
                            <div class="dd-handle">Item 4</div>
                        </li>
                        <li class="dd-item" data-id="5" data-foo="bar">
                            <div class="dd-nodrag">Item 5</div>
                        </li>
                    </ol>
                </li>
            </ol>
        </div>
    </div>

手头问题的屏幕截图：

（下拉完全展开）

（下拉菜单完全折叠）

标签： javascripthtmlasp.net-core

Answer 1

您使用的是哪个版本的 nestable2？我用的是CDNJS：</p>

<div class="cf nestable-lists">
<div class="dd" id="nestable">
    <ol class="dd-list">
        <li class="dd-item" data-id="1">
            <div class="dd-handle">Item 1</div>
        </li>
        <li class="dd-item" data-id="2">
            <div class="dd-handle">Item 2</div>
        </li>
        <li class="dd-item dd-collapsed" data-id="3">
            <button class="dd-collapse" data-action="collapse" type="button">Collapse</button>
            <button class="dd-expand" data-action="expand" type="button">Expand</button>
            <div class="dd-handle">Item 3</div>
            <ol class="dd-list">
                <li class="dd-item" data-id="4">
                    <div class="dd-handle">Item 4</div>
                </li>
                <li class="dd-item" data-id="5" data-foo="bar">
                    <div class="dd-nodrag">Item 5</div>
                </li>
            </ol>
        </li>
    </ol>
</div>

@section Scripts{

<script src="//cdnjs.cloudflare.com/ajax/libs/nestable2/1.6.0/jquery.nestable.min.js"></script>

<script>
    $('.dd').nestable({ /* config options */ });
</script>

}

它在列表展开时隐藏展开按钮：