下拉试验原理
下拉试验原理?
下拉菜单的使用及原理
1
因为Bootstrap.js是依赖jQuery来实现的,所以我们需要先加载jQuery组件。在Bootstrap中使用下拉菜单有一个非常严格的结构,如果使用不当则不能显示出下拉菜单。使用class="dropdown"的容器包裹整个下拉菜单:
使用一个
在元素,并且添加class="dropdown-menu"。通过以上三种方式就可以实现一个简单的下拉菜单,完整代码如下
2
将上面的代码贴到页面中运行,单击下拉菜单按钮会出现下拉菜单,再次单击该按钮下拉菜单将消失。初始状态下,下拉菜单默认是不显示的,这是因为在class="dropdown-menu"中设置了"display:none"来隐藏下拉菜单,我们可以使用chrome浏览器中的审查元素(或者Firefox中的Firebug)来查看其样式。当我们单击下拉菜单的时候,class="dropdown"上会新增一个"open"类,再次单击时"open"被移除,下拉菜单的显示与隐藏就是这样实现的。