如何通过一键切换展开/折叠行为？答案

【问题标题】：How to toggle expand/collapse behavior by one button?如何通过一键切换展开/折叠行为？
【发布时间】：2018-01-03 16:22:24
【问题描述】：

我使用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>

【问题讨论】：

您应该分享更多信息，例如您的 html 结构，以便我们可以据此回答

标签： javascript jquery jquery-nestable

【解决方案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>

【讨论】：

【解决方案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')
})

【讨论】：

【解决方案3】：

尝试使用

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

因为它会自动切换

这是我尝试过的链接https://codepen.io/anon/pen/goxpKv

【讨论】：