dat.gui how to hide menu with code

问题:

I made a menu using dat.gui for my applcation with Three.js. It works fine, I have also discovered that pressing h key I can hide the menu created with dat.gui. My question is how can I make the menu appear/disappear directly from the code?

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

 gui.???

I tried to use the property of the DOMElement hide and it works but I would like a unique way to handle this function. There is a function to call? I have noticed that JavaScript events related to the keystrokes are related to the scope via a bind in the library. But what is the correct way to do this?

回答1:

I hade the same issue and solved it by:

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

回答2:

You can try

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

回答3:

As of latest version:

gui.close();

回答4:

Ok found a solution by adding the following function to the prototype of 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();
  }

回答5:

I'd recommend:

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

as it also prevents clicking. With toggleHide() it's possible to still click it. Just closing it leaves the opportunity to re-open.

Worked for me as I don't want the user to re-open it ;)

回答6:

What you and I were looking for is

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

I got this from the source at line 2104 where the internal functions open and close are doing exactly this.

The gui reacts to the value change on the fly (you can reassign gui.closed from the console to see it in action).

回答7:

You can toggle the 'closed' class on the first ul tag within the gui domElement.

Here's how to do it if you are using JQuery:

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