Misunderstanding of Bootstrap drop-down menu

Bootstrap drop-down menu HTML is written in two ways:

First, built-in:

<div class= "dropdown" > <button class= "btn btn-primary" data-toggle= "dropdown" > Drop-down menu <span class= "Caret" ></span> </button> <ul class= "Dropdown-menu" > <li><a href= "#" > First Page </a></li> <li><a href= "#" > Info </a></li> <li><a href= "#" > Product < ;/a></li> <li><a href= "#" > About </a></li> </ul></div>

Second, the external type:

<button class= "Btn btn-primary"  data-toggle= "dropdown"  data-target= "#dp" >     drop-down menu <span class= "caret" ></span></button ><div class= "dropdown"  id= "DP" >    <ul class= "Dropdown-menu" >        <li><a href= "#" > Home </a></li>         <li><a href= "#" > News </a></li>         <li><a href= "#" > Products </a></li>         <li><a href= "#" > About </a></li>     </ul></div> 

The peripheral button must indicate the Data-target property, which must be marked with the # number, whose ID value must be the ID of the outer div of Class dropdown, and the menu cannot pop up if it is written to the pop-up part of the Ul.dropdown-menu. built-in can be added without the Data-target attribute, if the addition must be in accordance with the external requirements of the addition, otherwise it will not bounce out

In addition: JS writing is not recommended, prone to problems

This article from the "front-end Development Study Notes" blog, declined reprint!

Misunderstanding of Bootstrap drop-down menu