Question

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

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

 gui.???

我尝试使用DOMElement隐藏的属性并且它可以工作，但我想要一种独特的方式来处理这个功能。有一个功能可以打电话吗？我注意到与击键相关的JavaScript事件通过库中的绑定与范围相关。但是这样做的正确方法是什么？

Answer 1

我有同样的问题并通过以下方式解决：

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

Answer 2

截至最新版本：

gui.close（）;

Answer 3

你可以尝试

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

Answer 4

通过将以下函数添加到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();
  }

Answer 5

你和我在寻找的是

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

我是从the source 第2104行获得的，其中内部函数打开且关闭正在这样做。

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

Answer 6

您可以切换关闭的＆＃39; gui domElement中第一个ul标记的类。

如果您使用的是JQuery，请执行以下操作：

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

Answer 7

我建议：

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

因为它也可以防止点击。使用toggleHide()，仍然可以点击它。关闭它会留下重新开放的机会。

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

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

7 个答案: