javascript - 动画 jquery 的泛化

Question

我是 jquery 的菜鸟。我正在努力做到流畅:

我需要鼠标悬停时每个菜单分别折叠。2个菜单同时折叠的问题!我确定这是基本的东西，但我似乎无法弄清楚。请帮忙。谢谢

            $(document).ready(function() {

              $(".lead-title-index").hover(function() {
                $(".featured-content").slideDown("slow");

              });

            });

.featured-content {
  width: 200px;
  height: 400px;
  display: none;
  background: #2E2E2E;
}
.lead-title-index {
  background: #FFBF00;
  display: block;
  margin-bottom: 0px;
  position: relative;
  color: #000;
  font-size: 14px;
  width: 200px;
  height: 70px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="col-md-15 col-sm-3">

  <div class="lead-title-index">

  </div>

  <article id="video" class="featured-content">

    <div class="promo-text">

    </div>
  </article>
</div>

<div class="col-md-15 col-sm-3">

  <div class="lead-title-index">

  </div>

  <article id="video" class="featured-content">

    <div class="promo-text">

    </div>
  </article>
</div>

Answer 1

您需要在选定元素之后使用下一个元素，如下所示，

        $(document).ready(function() {

          $(".lead-title-index").hover(function() {
            $(this).next(".featured-content").slideDown("slow");

          });

        });