正文
javascript下拉菜单,javascript 下拉列表框
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
JS组件Bootstrap实现下拉菜单效果代码
Bootstrap
下拉菜单
这一章讲解了下拉菜单，但是没有涉及到交互部分，本章将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。
如果您想要单独引用该插件的功能，那么您需要引用
dropdown.js。或者，正如
Bootstrap
插件概览
一章中所提到，您可以引用
bootstrap.js
或压缩版的
bootstrap.min.js。
一、用法
您可以切换下拉菜单（Dropdown）插件的隐藏内容：
1、通过
data
属性：向链接或按钮添加
data-toggle="dropdown"
来切换下拉菜单，如下所示：
div
class="dropdown"
a
data-toggle="dropdown"
href="#"下拉菜单（Dropdown）触发器/a
ul
class="dropdown-menu"
role="menu"
aria-labelledby="dLabel"
...
/ul
/div
如果您需要保持链接完整（在浏览器不启用
JavaScript
时有用），请使用
data-target
属性代替
href="#"：
div
class="dropdown"
a
id="dLabel"
role="button"
data-toggle="dropdown"
data-target="#"
href="/page.html"
下拉菜单（Dropdown）
span
class="caret"/span
/a
ul
class="dropdown-menu"
role="menu"
aria-labelledby="dLabel"
...
/ul
/div
2、通过
JavaScript：通过
JavaScript
调用下拉菜单切换，请使用下面的方法：
$('.dropdown-toggle').dropdown()
二、下拉菜单简单实例
常规使用中，和组件方法一样，代码如下：
//声明式用法
div
class="dropdown"
button
class="btn
btn-primary"
data-toggle="dropdown"
下拉菜单
span
class="caret"/span
/button
ul
class="dropdown-menu"
lia
href="#"首页/a/li
lia
href="#"产品/a/li
lia
href="#"资讯/a/li
lia
href="#"关于/a/li
/ul
/div
声明式用法的关键核心：
1.外围容器使用
class="dropdown"包裹；
2.内部点击按钮事件绑定
data-toggle="dropdown"；
3.菜单元素使用
class="dropdown-menu"。
//如果按钮在容器外部，可以通过
data-target
进行绑定。
button
class="btn
btn-primary"
id="btn"
data-toggle="dropdown"
data-target="#dropdown"
在
JavaScript
调用中，没有属性，方法并不好用，下面介绍四个基本事件。
//下拉菜单方法，但仍然需要
data-*
$('#btn').dropdown();
$('#btn').dropdown('toggle');
下拉菜单支持
4
种事件，分别对应弹出前、弹出后、关闭前和关闭后。
//事件，其他雷同
$('#dropdown').on('show.bs.dropdown',
function()
{
alert('在调用
show
方法时立即触发！');
});
三、在标签页内的下拉菜单的用法
!DOCTYPE
html
html
head
titleBootstrap
实例
-
带有下拉菜单的标签页/title
link
href="/bootstrap/css/bootstrap.min.css"
rel="stylesheet"
script
src="/scripts/jquery.min.js"/script
script
src="/bootstrap/js/bootstrap.min.js"/script
/head
body
p带有下拉菜单的标签页/p
ul
class="nav
nav-tabs"
li
class="active"a
href="#"Home/a/li
lia
href="#"SVN/a/li
lia
href="#"iOS/a/li
lia
href="#"VB.Net/a/li
li
class="dropdown"
a
class="dropdown-toggle"
data-toggle="dropdown"
href="#"
Java
span
class="caret"/span
/a
ul
class="dropdown-menu"
lia
href="#"Swing/a/li
lia
href="#"jMeter/a/li
lia
href="#"EJB/a/li
li
class="divider"/li
lia
href="#"分离的链接/a/li
/ul
/li
lia
href="#"PHP/a/li
/ul
/body
/html
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助。
前端javascript怎么select下拉菜单
判断select选项中 是否存在Value="paraValue"的Item
向select选项中 加入一个Item
从select选项中 删除一个Item
删除select中选中的项
修改select选项中 value="paraValue"的text为"paraText"
设置select中text="paraText"的第一个Item为选中
设置select中value="paraValue"的Item为选中
得到select的当前选中项的value
得到select的当前选中项的text
得到select的当前选中项的Index
清空select的项
怎么用JS写个下拉菜单
其实思路很容易的，先做大导航。然后做下拉菜单，但是下拉菜单默认是display：none;当鼠标指向上边的大导航的项目的时候（mouseover），对应的下拉菜单的CSS样式中的display属性设置为block，mouseout的时候又置为none；
javascript 最简单下拉菜单小问题
script type="text/javascript"
window.onload=function()
{
var oMenu=document.getElementById('menu');
var aLi=oMenu.children;//获取oMenu下的所有非文本字节点
for(var i=0;iaLi.length;i++)//为每个子节点添加鼠标移入移出事件
{
aLi[i].onmouseover=function()//移入
{
if(this.children.length1)//当该li节点上的非文本子节点数大于1个
{
this.children[1].style.display='block';//将该li节点下的索引为1也就是ul节点显示
}
}
aLi[i].onmouseout=function()//移出
{
if(this.children.length1)////当该li节点上的非文本子节点数大于1个
{
this.children[1].style.display='none';//将该li节点下的索引为1也就是ul节点隐藏
}
}
}
}
/script
