.dropdown表示下拉菜单
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<title>下拉菜单</title>
<script>
function showHTMLContent(showElement, codeElement) {
$(showElement).html($('<div/>').text($(codeElement).html()).html());
}
$(function() {
showHTMLContent('#showDropdown', '#dropdown');
$('#showSeparator').click(function() {
if (this.checked) {
$('#separator').removeClass('hidden');
} else {
$('#separator').addClass('hidden');
}
showHTMLContent('#showDropdown', '#dropdown');
});
$('#showHeader').click(function() {
if (this.checked) {
$('#header').removeClass('hidden');
} else {
$('#header').addClass('hidden');
}
showHTMLContent('#showDropdown', '#dropdown');
});
$('#active').click(function() {
if (this.checked) {
$('#cpp').addClass('active');
} else {
$('#cpp').removeClass('active');
}
showHTMLContent('#showDropdown', '#dropdown');
});
$('#disabled').click(function() {
if (this.checked) {
$('#java').addClass('disabled');
} else {
$('#java').removeClass('disabled');
}
showHTMLContent('#showDropdown', '#dropdown');
});
$('#right').click(function() {
if (this.checked) {
$('#menu').addClass('dropdown-menu-right');
} else {
$('#menu').removeClass('dropdown-menu-right');
}
showHTMLContent('#showDropdown', '#dropdown');
});
$('#up').click(function() {
if (this.checked) {
$('#dropdownMenu').attr('class', 'dropup');
} else {
$('#dropdownMenu').attr('class', 'dropdown');
}
showHTMLContent('#showDropdown', '#dropdown');
});
});
</script>
</head>
<body>
<div class="container">
<h1>下拉菜单</h1>
<form role="form">
<div class="form-group">
<input type="checkbox" id="showSeparator"> Show Separator <br>
<input type="checkbox" id="showHeader"> Show header <br>
<input type="checkbox" id="active"> Set C++ active <br>
<input type="checkbox" id="disabled"> Set Java disabled <br>
<input type="checkbox" id="right"> Dropdown at right <br>
<input type="checkbox" id="up"> Dropup menu <br>
</div>
</form>
<h2>代码</h2>
<pre id="showDropdown"></pre>
<h2>样式</h2>
<div id="dropdown">
<div class="dropdown" id="dropdownMenu">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Programming languages
<span class="caret"></span></button>
<ul class="dropdown-menu" id="menu">
<li id="cpp"><a href="#">C++</a></li>
<li id="java"><a href="#">Java</a></li>
<li><a href="#">Python</a></li>
<li class="divider hidden" id="separator"></li>
<li class="dropdown-header hidden" id="header">header</li>
<li><a href="#">PHP</a></li>
</ul>
</div>
</div>
<br><br>
</div>
</body>
</html>