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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了只显示一个div.panel,而不是两个相关的知识,希望对你有一定的参考价值。

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

这是我的代码。我有一个javascript解决方案切换display: noneblock,但使用该方法没有动画。

$(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>
答案

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

关于您的问题,问题是因为您在每个.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: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>

以上是关于只显示一个div.panel,而不是两个的主要内容,如果未能解决你的问题,请参考以下文章

为啥我的 ListView 显示在一个片段中而不是另一个片段中?

我获取的数据只显示一个数据而不是显示两个(Firebase,Swift)

Android:是不是可以将两个全屏片段链接到一个活动(只使用一个,但选择正确的一个有逻辑)?

数学上相同的变量 - 一个破坏着色器而不是

显示/隐藏片段而不是替换

我可以立即在其他地方移动片段而不重新创建任何内容