bootstrap4.1下拉菜单

最新推荐文章于 2023-07-23 12:03:28 发布

AsaZyf

最新推荐文章于 2023-07-23 12:03:28 发布

阅读量543

点赞数

文章标签： bootstrap 下拉菜单

本文链接：https://blog.csdn.net/AsaZyf/article/details/80069381

版权

bootstrap 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<style>
/*margin三个值代表上左右下*/
.a{
border: none;
}
div>ul{
display: none;
}
.b{
display: block;
}
</style>
</head>
<body style="margin: 200px;">

<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>

<div class="dropdown">
<button class="btn-info a">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">新闻</a>
</li>
<li>
<a href="#">娱乐</a>
</li>
<li>
<a href="#">财经</a>
</li>
<li>
<a href="#">体育</a>
</li>
</ul>
</div>

第一种做法

// $("div>button").click(function(){
// $("div>button").next().toggle() //css display: none;
// })

第二种做法
d=true
$("div>button").click(function(){
if (d) {
$("div>button").next().addClass("b")
d=false
} else{
$("div>button").next().removeClass("b")
d=true
}
})
</script>
</body>
</html>