【JavaScript】Bootstrap自动显示/隐藏菜单栏

最新推荐文章于 2024-05-14 09:55:02 发布

爱敲代码的大海

最新推荐文章于 2024-05-14 09:55:02 发布

阅读量4.3k

点赞数

分类专栏： JavaScript学习

本文链接：https://blog.csdn.net/qq9108780/article/details/75136634

版权

JavaScript学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title></title>
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		function test() {
			document.getElementById('showc').style.display='block';
		}
		function test1() {
			document.getElementById('showc').style.display='none';
		}
	</script>
</head>
<body>
	<div class="container">
		<nav class="navbar navbar-default" role="navigation">
			<ul class="nav navbar-nav" οnmοuseenter="test()" οnmοuseleave="test1()">
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" >
						编程语言 
						<b class="caret"></b>
					</a>
					<ul class="dropdown-menu" style="display: none;" id="showc">
						<li><a>ASP</a></li>
						<li><a>JSP</a></li>
						<li><a>PHP</a></li>
					</ul>
				</li>
			</ul>
		</nav>
	</div>
</body>
</html>

效果图：

爱敲代码的大海

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】Bootstrap自动显示/隐藏菜单栏

function test() { document.getElementById('showc').style.display='block'; } function test1() { document.getElementById('showc').style.display='none'; } 编程语言
复制链接

扫一扫

专栏目录