版权声明：博客知识产权来源命运的信徒，切勿侵权 https://blog.csdn.net/qq_37591637/article/details/89011013
先来一下最终效果吧
亮点元素
1、jquery
2、bootstrap框架
完整代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 响应式的列重置</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
ul li{
float:left;
margin-left:3%;
padding-top:2%;
}
#uli{
width:100%;
height:40px;
background-color:#337ab7;
color:#ffffff;
margin-top:2%;
margin-left:-2%;
}
</style>
<body>
<div class="container">
<div class="row" >
<button id="fat-btn" class="btn btn-primary" type="button" onclick="show();">请选择种类</button>
<span id="tresult"></span>
</div>
<ul style="list-style:none;" id="uli">
<li>五谷杂粮</li>
<li>水产类</li>
<li>土地</li>
<li>蔬菜</li>
<li>水果</li>
<li>花生坚果类</li>
<li>茶树类</li>
<li>鲜花类</li>
<li>其他</li>
<li></li>
</ul>
</div>
</body>
<script>
function show(){
var status=$("#uli").css('display');
if(status=="none"){
$("#uli").show();
}else{
$("#uli").hide();
}
}
$(document).ready(function(){
var Uarry=$("#uli li");
//获取所有的li元素
$("#uli li").click(function(){
//点击事件
//测试直接获取值
var v=$(this).text();
$("#tresult").text(v);
})
})
</script>
</html>