js实现下拉菜单
下拉试验原理？
下拉试验原理？
下拉菜单的使用及原理
1
因为Bootstrap.js是依赖jQuery来实现的，所以我们需要先加载jQuery组件。在Bootstrap中使用下拉菜单有一个非常严格的结构，如果使用不当则不能显示出下拉菜单。使用class=#34dropdown#34的容器包裹整个下拉菜单：
ltdiv class=#34dropdown#34gtlt/divgt
使用一个ltbuttongt按钮作为一个父级菜单，并且定义一个class=#34dropdown-toggle#34，给ltbuttongt添加一个自定义属性data-toggle=#34dropdown#34，这里是相对固定的。所谓的相对固定是指按钮的样式可以修改：
ltbutton class=#34btn btn-default dropdown-toggle#34 type=#34button#34 data-toggle= #34dropdown#34gtlt/buttongt
在ltbuttongt按钮的同级添加一个ltulgt元素，并且添加class=#34dropdown-menu#34。通过以上三种方式就可以实现一个简单的下拉菜单，完整代码如下
2
将上面的代码贴到页面中运行，单击下拉菜单按钮会出现下拉菜单，再次单击该按钮下拉菜单将消失。初始状态下，下拉菜单默认是不显示的，这是因为在class=#34dropdown-menu#34中设置了#34display：none#34来隐藏下拉菜单，我们可以使用chrome浏览器中的审查元素（或者Firefox中的Firebug）来查看其样式。当我们单击下拉菜单的时候，class=#34dropdown#34上会新增一个#34open#34类，再次单击时#34open#34被移除，下拉菜单的显示与隐藏就是这样实现的。