<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src = "../libs/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src = "../libs/popper.min.js"></script>
<script type="text/javascript" src = "../libs/bootstrap.min.js"></script>
<link rel="stylesheet" href="../libs/bootstrap.min.css">
<title>无标题文档</title>
</head>
<style>
.row{
border: 1px solid red;
}
</style>
<body>
<div class="row">
<div class="col-xl-12">
<input type="text" id = "one">
</div>
</div>
<div class="row" style="background-color: red;width: 40%; visibility: visible" id = "two">
<div class="col-xl-12">
<span>1</span> <br>
<span>2</span><br>
<span>3</span>
</div>
</div>
<div class="row">
<div class="col-12" style="background-color: aqua">
<span>111</span> <br>
<span>111</span> <br>
<span>111</span> <br>
<span>111</span>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$("#one").click(function(){
var a = $("#two").css("visibility");
if(a == "visible"){
$("#two").css("visibility","hidden");
}else{
$("#two").css("visibility","visible");
}
});
});
</script>
