第二次单击下拉菜单时，如何关闭它？

Question

我是 JavaScript 的新手，我拼凑了一些我发现的代码来制作水平手风琴，但我无法将其关闭。基本上我不知道怎么把它放在toggle上。

$(function () {

$(".item").on("click", function () {
  $(this)
    .next().show().animate({width: "12%"})
    (".info").hide()
    .animate({width: "0"});
});

});

这是我的代码笔：

http://codepen.io/SideSlaw/pen/zobJYO

Answer 1

您需要检查下拉列表是否处于活动状态。所以如果打开就加一个class="active"。这个class不需要任何样式，只是让我们的脚本知道它是打开的

这里是pen

这是代码：

$(function () {

  
  // when to clicking on any item show the info about him and hide other info elemnet 
  $(".item").on("click", function () {
    $(this).toggleClass("active");
    if($(this).hasClass('active')){
      $(this)
      .next().show().animate({width: "12%"});
    }
    else{
      $(".info").hide()
      .animate({width: "0"});
    }
  });
});

*{
  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;
  display: none;
  font: 20px monospace;
  padding: 10px;
  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);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html >
<head>
  <meta charset="UTF-8">
  <title>Horizontal Accordion </title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<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>
</html>

Answer 2

您必须更改动画的流程。

如果打开任何东西，点击先关闭，然后用动画打开。

对您的笔进行了一些修改以实现此目的 http://codepen.io/anon/pen/woOEgx

$(".item").on("click", function () {
    $(".info")
      .animate({width: "0"}).hide();
    $(this)
      .next().show().animate({width: "12%"});
});

Answer 3

我使用 tansition 而不是 animate 并切换 class .active，它会在每次点击时删除并添加 class。并使用 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>

第二次单击下拉菜单时，如何关闭它？

How do I make my dropdown menu toggle off when I click it a second time?

html

javascript

css

accordion

toggle