我是 JavaScript 的新手，我拼凑了一些我发现的代码来制作水平 Accordion ，但我无法将其关闭。基本上我不知道如何将其置于切换状态。
$(function () {
$(".item").on("click", function () {
$(this)
.next().show().animate({width: "12%"})
(".info").hide()
.animate({width: "0"});
});
});
这是我的代码笔:
最佳答案
我使用 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/