javascript - 仅显示一个div.panel，而不同时显示两个

当我单击div.panel时，我想显示div.accordion。但是，此代码显示了两个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:[email protected]">[email protected]</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:[email protected]">[email protected]</a></td>
        </tr>
      </table>
    </div>
  </div>
</div>

最佳答案

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

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

为此，您需要使用DOM遍历来查找与单击的.panel相关的.accordion。为此，您可以使用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:[email protected]">[email protected]</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:[email protected]">[email protected]</a></td>
        </tr>
      </table>
    </div>
  </div>
</div>

另请注意，默认情况下使用CSS隐藏.panel元素。如果使用JS，则在页面加载时会有一个FOUC。

关于javascript - 仅显示一个div.panel，而不同时显示两个，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55119957/