只显示一个 div.panel，而不是两个

Question

我想在点击div.accordion 时显示div.panel。然而，这段代码显示了两个 div.panel 元素，而不仅仅是被点击的手风琴的子元素。

这是我的代码。我有一个使用 Javascript 的解决方案，可以将 display: none 切换为 block，但使用该方法没有动画。

$(document).ready(function() {
  $(".panel").hide()
});

$(".accordion").click(function() {
  if ($(".panel:visible").length != 0) {
    $(".panel").slideUp("normal");
  } else {
    $(".panel").slideDown("normal");
  }
  return false;
});

.accordion {
  cursor: pointer;
  border: none;
  outline: none;
  transition: 0.9s;
  margin: 0 auto;
}

.carles {
  background-image: url('/images/carles.jpeg');
  background-repeat: no-repeat;
  width: 35vh;
  height: 35vh;
  margin: 0 auto;
  background-position: center;
  border-radius: 5px;
}

.charlotte {
  background-image: url('/images/charlotte.jpeg');
  background-repeat: no-repeat;
  width: 35vh;
  height: 35vh;
  margin: 0 auto;
  background-position: center;
  border-radius: 5px;
}

.charlotte:hover,
.carles:hover,
.active>.carles,
.active>.charlotte {
  filter: grayscale(50%);
  -webkit-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75);
}


/* Panel */

.panel {
  padding: 18px 18px;
  background-color: rgba(255, 255, 255, 1);
  color: #777;
  overflow: hidden;
  text-align: justify;
}

.nom {
  margin-top: 10%;
  text-align: center;
}

.coord {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 10%;
}

.coord i {
  font-size: 2em;
}

.coord p,
.coord a {
  font-weight: bold;
  text-align: left;
  margin-left: 4em;
}

<div class="accordion col-6">
  <div class="carles"></div>
  <div class="nom">
    <h3>Name 1</h3>
    <p>Employé polyvalent</p>
    <i class="fas fa-caret-down"></i>
  </div>
  <div class="panel">
    <ul>
      <li>Docteur en Géographie</li>
      <li>Université de Lille & Université de Valencia</li>
      <li>15 ans d'expériences dans l'éolien</li>
      <li>Plus de 100 MW éoliens développés</li>
      <li>Fondateur d'une société en 2004</li>
    </ul>
    <div class="coord">
      <table>
        <tr>
          <td><i class="fas fa-mobile-alt"></i></td>
          <td>
            <p>06 07 85 88 88</p>
          </td>
        </tr>
        <tr>
          <td><i class="far fa-envelope"></i></td>
          <td><a href="mailto:plop@gmail.com">plop@gmail.com</a></td>
        </tr>
      </table>
    </div>
  </div>
</div>
<div class="accordion col-6">
  <div class="charlotte">
  </div>
  <div class="nom">
    <h3>Name 2</h3>
    <p>Employé polyvalent</p>
    <i class="fas fa-caret-down"></i>
  </div>
  <div class="panel">
    <ul>
      <li>Docteur en Géographie</li>
      <li>Université de Lille & Université de Valencia</li>
      <li>15 ans d'expériences dans l'éolien</li>
      <li>Plus de 100 MW éoliens développés</li>
      <li>Fondateur d'une société en 2004</li>
    </ul>
    <div class="coord">
      <table>
        <tr>
          <td><i class="fas fa-mobile-alt"></i></td>
          <td>
            <p>06 07 85 88 88</p>
          </td>
        </tr>
        <tr>
          <td><i class="far fa-envelope"></i></td>
          <td><a href="mailto:plop@gmail.com">plop@gmail.com</a></td>
        </tr>
      </table>
    </div>
  </div>
</div>

Answer 1

首先，您需要将依赖于正在加载的 DOM 的所有逻辑放在 document.ready 处理程序中。

关于您的问题，问题是因为您在每次.accordion 点击时在 DOM 中选择了 all .panel 元素。

为此，您需要使用 DOM 遍历来查找与单击的 .accordion 相关的 .panel。为此，您可以使用find()。然后你需要隐藏所有其他不相关的.panel 元素。

$(document).ready(function() {
  $(".accordion").click(function() {
    var $target = $(this).find('.panel');
    $('.panel').not($target).slideUp();
    $target.slideToggle();
  });
});

.accordion {
  cursor: pointer;
  border: none;
  outline: none;
  transition: 0.9s;
  margin: 0 auto;
}

.carles {
  background-image: url('/images/carles.jpeg');
  background-repeat: no-repeat;
  width: 35vh;
  height: 35vh;
  margin: 0 auto;
  background-position: center;
  border-radius: 5px;
}

.charlotte {
  background-image: url('/images/charlotte.jpeg');
  background-repeat: no-repeat;
  width: 35vh;
  height: 35vh;
  margin: 0 auto;
  background-position: center;
  border-radius: 5px;
}

.charlotte:hover,
.carles:hover,
.active>.carles,
.active>.charlotte {
  filter: grayscale(50%);
  -webkit-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75);
}


/* Panel */

.panel {
  padding: 18px 18px;
  background-color: rgba(255, 255, 255, 1);
  color: #777;
  overflow: hidden;
  text-align: justify;
  display: none;
}

.nom {
  margin-top: 10%;
  text-align: center;
}

.coord {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 10%;
}

.coord i {
  font-size: 2em;
}

.coord p,
.coord a {
  font-weight: bold;
  text-align: left;
  margin-left: 4em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion col-6">
  <div class="carles"></div>
  <div class="nom">
    <h3>Name 1</h3>
    <p>Employé polyvalent</p>
    <i class="fas fa-caret-down"></i>
  </div>
  <div class="panel">
    <ul>
      <li>Docteur en Géographie</li>
      <li>Université de Lille &amp; Université de Valencia</li>
      <li>15 ans d'expériences dans l'éolien</li>
      <li>Plus de 100 MW éoliens développés</li>
      <li>Fondateur d'une société en 2004</li>
    </ul>
    <div class="coord">
      <table>
        <tr>
          <td><i class="fas fa-mobile-alt"></i></td>
          <td>
            <p>06 07 85 88 88</p>
          </td>
        </tr>
        <tr>
          <td><i class="far fa-envelope"></i></td>
          <td><a href="mailto:plop@gmail.com">plop@gmail.com</a></td>
        </tr>
      </table>
    </div>
  </div>
</div>
<div class="accordion col-6">
  <div class="charlotte">
  </div>
  <div class="nom">
    <h3>Name 2</h3>
    <p>Employé polyvalent</p>
    <i class="fas fa-caret-down"></i>
  </div>
  <div class="panel">
    <ul>
      <li>Docteur en Géographie</li>
      <li>Université de Lille & Université de Valencia</li>
      <li>15 ans d'expériences dans l'éolien</li>
      <li>Plus de 100 MW éoliens développés</li>
      <li>Fondateur d'une société en 2004</li>
    </ul>
    <div class="coord">
      <table>
        <tr>
          <td><i class="fas fa-mobile-alt"></i></td>
          <td>
            <p>06 07 85 88 88</p>
          </td>
        </tr>
        <tr>
          <td><i class="far fa-envelope"></i></td>
          <td><a href="mailto:plop@gmail.com">plop@gmail.com</a></td>
        </tr>
      </table>
    </div>
  </div>
</div>

还要注意默认情况下使用 CSS 隐藏 .panel 元素。如果你使用 JS，页面加载时会出现 FOUC。