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

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事件通过库中的绑定与作用域相关联。但正确的方法是什么？

- Giancarlo

Answer 1

我遇到了相同的问题，并通过以下方法解决：

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

- Qiau

---

也有 gui.close()。 - dpren

@CompanyLaser 但是gui.close()会滚动控件，而dat.GUI.toggleHide()实际上会隐藏它们（通过将zIndex设置为负数）。您只能通过API一次性隐藏所有GUI，而不能单独隐藏。除非您跟踪上一个状态，否则无法断言它们是否显示或隐藏。 - binki

Answer 2

截至最新版本：

gui.close();

意思是关闭GUI界面。

- biojazzard

---

gui.close()并不能完全隐藏GUI，它只是关闭了它。 使用GUI.toggleHide()可以完成任务！（参考@Qiau的答案）。 - Jérémie Boulay

Answer 3

您可以尝试：

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

- malekcellier

Answer 4

现在是2022年，在dat.gui的版本^0.7.9中，你可以使用.hide()和.show()函数：

const gui = new dat.GUI();
gui.hide(); // Hide completely
gui.show(); // Show

const gui = new dat.GUI()
let idx = 0

gui.add({ variable1: true }, 'variable1')

setInterval(() => {
  idx++%2 ? gui.show() : gui.hide()
}, 2000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>

- Anurag Srivastava

Answer 5

你和我所寻找的是什么，是这个：

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

我从源代码的2104行处获取了这个，其中内部函数open和close正是在执行这个操作。

GUI会实时响应值的变化（你可以从控制台重新分配gui.closed来查看它的效果）。

- mexitalian

Answer 6

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

- Andreas Köberle

Answer 7

我建议：

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

因为它还可以防止点击。使用toggleHide()仍然可以点击它。 只是关闭它会留下重新打开的机会。

对我来说很有效，因为我不希望用户重新打开它 ;)

- Zeno

Answer 8

您可以在GUI dom元素中的第一个ul标签上切换“closed”类。

如果您正在使用JQuery，以下是如何执行此操作的：

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

- Darren Hicks