列表展开时nestable2展开按钮未隐藏

时间:2019-03-04 09:33:15

标签: javascript html asp.net-core

我正在尝试在.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>

当前问题的屏幕截图:

(下拉列表完全展开) enter image description here

(下拉列表完全折叠) enter image description here

1 个答案:

答案 0 :(得分:0)

您正在使用哪个版本的nestable2?我使用CDNJS

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

}

当列表展开时,它会隐藏扩展按钮:

enter image description here