我是JavaScript的新手，我拼凑了一些代码，发现它们制作了水平手风琴，但是我无法将其关闭。基本上我不知道如何将其切换。
$(function () {
$(".item").on("click", function () {
$(this)
.next().show().animate({width: "12%"})
(".info").hide()
.animate({width: "0"});
});
});
这是我的codepen：
http://codepen.io/SideSlaw/pen/zobJYO
最佳答案
我改用tansition代替animate并切换类.active，每次单击都会删除并添加类。并通过css进行一些调整，以使过渡平滑。请参阅以下示例：
$(function () {
$(".item").on("click", function () {
$(this)
.next().toggleClass('active');
});
});*{
box-sizing: border-box;
}
body{
background: white;
color: #D74F33;
}
section {
width: 1900px;
margin: 10px auto;
position: fixed;
left:-8px;
}
.item{
width:9%;
height: 40px;
float: left;
border-right: 3px solid #D74F33;
font: 20px monospace;
padding: 10px;
cursor: pointer;
background-color: #333;
transform: skew(-20deg);
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
text-align: center;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.info{
float: left;
width:0%;
height: 40px;
background: #4B3E4D;
visibility: hidden;
font: 20px monospace;
background-color: gr;
transform: skew(-20deg);
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
text-align: center;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
transition: width ease-out .3s, visibility ease-out .3s;
white-space: nowrap;
overflow:hidden;
padding: 10px 0;
}
.info.active{
visibility: visible;
width:12%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<section>
<div class="item"> about ►</div>
<div class="info">lab | research</div>
<div class="item"> people ►</div>
<div class="info">current | alumni</div>
</section>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>关于javascript - 第二次单击时如何关闭下拉菜单？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41258111/