Question

我想要的是，我点击一个链接，然后在显示或隐藏之前使用div，我尝试过.prev（）和.before（），但我认为我没有正确使用它们。代码只是其中的一部分，使用owl carousel重复相同的代码。

正在发生的是所有课程都在展示它，而不仅仅是1项。

所以当我点击showMore按钮时，我只想要上一个类：moreInfo来显示/隐藏。

$('.showMore').click(function() {
  var information = $('.moreInfo');
  if (information.is(":hidden")) {
    information.slideDown("slow");
  } else {
    information.slideUp("slow");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <span> 
    <img src="owl1.jpg">							
    <p class="title">Owl</p>	
    <div class="moreInfo">
      <div class="bio">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat urna arcu, vel molestie nunc commodo non. Nullam vestibulum odio vitae fermentum rutrum.</p>
      </div>
      <div class="youtube">
        <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
    <div class="buttons">
      <a href="#" class="btn btn-lg btn-warning showMore"><i class="fa fa-arrow-down"></i></a>
    </div>
  </span> 
</div>

由于

Answer 1

您需要将其中一个转到button DIV，然后转到上一个DIV以达到相应的moreInfo DIV。

var information = $(this).closest(".buttons").prev(".moreInfo");

这里是完整的更新代码：

＆＃13;

$('.showMore').click(function() {
  var information = $(this).closest(".buttons").prev(".moreInfo");
  if (information.is(":hidden")) {
    information.slideDown("slow");
    $(this).find("i").text("Show less");
  } else {
    information.slideUp("slow");
    $(this).find("i").text("Show more");
  }
});

＆＃13;

.moreInfo {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <span> 
    <p class="title">Owl</p>	
    <div class="moreInfo">
      <div class="bio">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat urna arcu, vel molestie nunc commodo non. Nullam vestibulum odio vitae fermentum rutrum.</p>
      </div>
      <div class="youtube">
        <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
    <div class="buttons">
      <a href="#" class="btn btn-lg btn-warning showMore"><i class="fa fa-arrow-down">Show more</i></a>
    </div>
  </span> 
</div>

＆＃13;

JQuery隐藏/显示按钮之前的Div

1 个答案: