如何通過一個按鈕切換展開/折疊行為？

Question

我使用Nestable插件來創建樹結構。 我想切換按鈕以展開/折疊。

為了擴展，我添加以下內容：

$('#tree').nestable('expandAll');

要折疊，我添加以下內容：

$('#tree').nestable('collapseAll');

但是我分別使用2個不同的按鈕來完成此操作。 如何通過一個按鈕切換展開/折疊行為？

HTML：

<div id="tree" class="dd">
    <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" data-id="3">
            <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">
                    <div class="dd-handle">Item 5</div>
                </li>
            </ol>
        </li>
    </ol>
</div>

Answer 1

像這樣在兩個function之間切換：

 var click = false; function callFunction(el) { if (!click) { //$('#tree').nestable('expandAll'); console.log('expandAll'); click = true; } else { //$('#tree').nestable('collapseAll'); click = false; console.log('collapseAll'); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="callFunction(this)">Toggle</button> 

Answer 2

您可以向按鈕添加事件，該事件將檢查按鈕的操作

   $('#tree').on('click', 'button', function(e){
    $(e.target).data('action') == 'expand-all' ? $(e.target).data('action', 'collapse-all') : $(e.target).data('action', 'expand-all')
})

Answer 3

嘗試使用

$('#tree').nestable();

因為它會自動切換

這是我嘗試過的鏈接https://codepen.io/anon/pen/goxpKv