A brief discussion on drop-down menu events in Bootstrap3

This article takes you through the events of the Bootstrap3 drop-down menu. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Events of the drop-down menu

Bootstrap provides 4 events for the drop-down menu plug-in. By listening to these events, you can control specific Respond to user actions during the operation phase. These events and their meanings are shown in Table 4‑3.

Table 4‑3 Events and meanings of dropdown plug-in

Event	Meaning
show.bs.dropdown	After the show method is called, this event is triggered immediately
shown.bs.dropdown	This event is triggered when the drop-down menu is visible to the user (and the transition effect is completed)
hide.bs.dropdown	After the hide method is called, this event is triggered immediately Event
hidden.bs.dropdown	This event is triggered after the drop-down menu has been hidden (and the transition effect is completed)

Related recommendations: "bootstrap Tutorial"

If developers want to customize the functions of the drop-down menu, they can listen to these events through JavaScript to perform corresponding operations. Such as:

<script>
  $(&#39;#myDropdown&#39;).on(&#39;show.bs.dropdown&#39;, function () {
   alert("开始显示下拉菜单。");
  });
  $(&#39;#myDropdown&#39;).on(&#39;shown.bs.dropdown&#39;, function () {
     alert("下拉菜单已经显示。");
  });
  $(&#39;#myDropdown&#39;).on(&#39;hide.bs.dropdown&#39;, function () {
     alert("开始隐藏下拉菜单。");
  });
  $(&#39;#myDropdown&#39;).on(&#39;hidden.bs.dropdown&#39;, function () {
     alert("下拉菜单已经隐藏。");
  });
</script>

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of A brief discussion on drop-down menu events in Bootstrap3. For more information, please follow other related articles on the PHP Chinese website!