<!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;">
<!--jQuery最好在body内写-->
<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").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>
<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;">
<!--jQuery最好在body内写-->
<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>
<script>
first approach
// $("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>