javascript - jquery Accordion - onclick 打开所有 Accordion

Question

我创建了一个自定义的 jquery Accordion ，我被代码困住了，当我点击 Accordion 标题时，它打开了两个 Accordion ，它应该打开我点击的那个，下面是代码:

$(document).ready(function() {
    $(".acc-wrap > .acc-head").on("click", function() {
        if ($(this).hasClass('active')) {
            $(this).removeClass("active");
            $(this).siblings('.acc-body').slideUp(200);
            $(".acc-wrap > .acc-head").attr('class', 'acc-head opened');
        } else {
            $(".acc-wrap > .acc-head").attr('class', 'acc-head closed');
            $(this).addClass("active");
            $('.acc-body').slideUp(200);
            $(this).siblings('.acc-body').slideDown(200);
        }
    });
});

.projects-list {
  max-width: 600px;
  margin: 0 auto;
  background: #E0E0E0;
  padding: 15px 0;
  font-family: Roboto;
}
body {
  margin: 0;
  padding: 0;
}
.acc-wrap {
  position: relative;
  width: 100%;
}
.acc-wrap > .acc-head {
  float: left;
  width: 100%;
  display: block;
  background-color: #264796;
  padding: 10px;
  color: #fff;
  font-weight: 600;
  border-bottom: 1px solid #ddd;
  transition: all 0.2s linear;
  position: relative;
}
.acc-wrap > .acc-head.opened {
  position: relative;
}
.acc-wrap > .acc-head.opened:after {
  content: "\f055";
  font-family: fontAwesome;
  position: absolute;
  right: 15px;
}
.acc-wrap > .acc-head.closed {
  position: relative;
}
.acc-wrap > .acc-head.closed:after {
  content: "\f056";
  font-family: fontAwesome;
  position: absolute;
  right: 15px;
}
.acc-body {
  position: relative;
  width: 100%;
  float: left;
  background-color: #fff;
  padding: 10px;
  border-bottom: 1px solid #ddd;
  display: none;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="projects-list">
  <div class="acc-wrap">
    <div class="acc-head opened"> Vestibulum </div>
    <div class="acc-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. </div>
    <div class="acc-head"> Vestibulum  2</div>
    <div class="acc-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. </div>
  </div>
</div>

Answer 1

我认为你应该使用 next-function 而不是 siblings-function:

https://api.jquery.com/next/

<style>
    .projects-list {
      max-width: 600px;
      margin: 0 auto;
      background: #E0E0E0;
      padding: 15px 0;
      font-family: Roboto;
    }
    body {
      margin: 0;
      padding: 0;
    }
    .acc-wrap {
      position: relative;
      width: 100%;
    }
    .acc-wrap > .acc-head {
      float: left;
      width: 100%;
      display: block;
      background-color: #264796;
      padding: 10px;
      color: #fff;
      font-weight: 600;
      border-bottom: 1px solid #ddd;
      transition: all 0.2s linear;
      position: relative;
    }
    .acc-wrap > .acc-head.opened {
      position: relative;
    }
    .acc-wrap > .acc-head.opened:after {
      content: "\f055";
      font-family: fontAwesome;
      position: absolute;
      right: 15px;
    }
    .acc-wrap > .acc-head.closed {
      position: relative;
    }
    .acc-wrap > .acc-head.closed:after {
      content: "\f056";
      font-family: fontAwesome;
      position: absolute;
      right: 15px;
    }
    .acc-body {
      position: relative;
      width: 100%;
      float: left;
      background-color: #fff;
      padding: 10px;
      border-bottom: 1px solid #ddd;
      display: none;
      box-sizing: border-box;
    }
</style>

`