On/off functionality inside a dropdown?

1. What is drop down toggle?
2. How do I add a button to a drop down list?
3. How do I make a dropdown close by clicking outside?
4. How do I prevent my dropdown from closing when clicking inside it?

What is drop down toggle?

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list: Dropdown Example.

How do I add a button to a drop down list?

Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.

How do I make a dropdown close by clicking outside?

Answer: Use the jQuery on() method

You can use the jQuery click() method in combination with the on() method to hide the dropdown menu when the user click outside of the trigger element.

How do I prevent my dropdown from closing when clicking inside it?

Removing the data attribute data-toggle="dropdown" and implementing the open/close of the dropdown can be a solution. This solution is working fine.