Javascript dat.gui如何用代码隐藏菜单

我用dat.gui为我的Three.js应用程序制作了一个菜单。 它工作得很好，我还发现按h键可以隐藏用dat.gui创建的菜单。 我的问题是如何使菜单直接从代码中显示/消失

 var gui = new dat.GUI();
 gui.add(text, 'message');
 gui.add(text, 'speed', -5, 5);

 gui.???

我尝试使用DomeElement hide的属性，它可以工作，但我希望有一种独特的方法来处理此函数。 有一个函数要调用吗？我注意到与击键相关的JavaScript事件通过库中的绑定与作用域相关。

---

但是正确的方法是什么呢？

Ok通过在dat.GUI原型中添加以下功能找到了解决方案：

  dat.GUI.prototype.removeFolder = function(name) {
    var folder = this.__folders[name];
    if (!folder) {
      return;
    }
    folder.close();
    this.__ul.removeChild(folder.domElement.parentNode);
    delete this.__folders[name];
    this.onResize();
  }

---

我发现了同样的问题，并通过以下方式解决了它：

var gui = new dat.GUI();
dat.GUI.toggleHide();

---

您可以在gui DomeElement中的第一个ul标记上切换“closed”类

以下是使用JQuery时的操作方法：

var gui = new dat.GUI();
$(gui.domElement).find(">ul").toggleClass("closed");

我建议：

$(gui.domElement).attr("hidden", true);

因为它还可以防止单击。使用

toggleHide（）

仍可以单击它。 只要关闭它，就有机会重新打开

---

为我工作，因为我不希望用户重新打开它；）

你和我要找的是

var gui = new dat.GUI();
// to toggle it closed
gui.closed = true;
// to toggle it open again
gui.closed = false;

我从第2104行得到这个结果，在那里内部函数打开和关闭 我们正是这样做的

gui会动态地对值更改做出反应（您可以从控制台重新分配gui.closed以查看它的运行情况）

你可以试试

var gui = new dat.GUI();
 //... your logic here
gui.__proto__.constructor.toggleHide()

自最新版本起：

gui.close（）

还有

gui.close（）

@CompanyLaser，但是gui.close（）会向上滚动控件，而

dat.gui.toggleHide（）

实际上会隐藏控件（通过将zIndex设置为负数）。您只能通过API一次隐藏所有GUI，而不能单独隐藏。除非跟踪上一个状态，否则不能断言它们被显示或隐藏。

gui.close（）

不会完全隐藏gui。把它关上。使用

GUI.toggleHide（）

就可以了！（参考@Qiau答案）。