Jquery 再次单击时无法关闭 div

Question

我试图通过单击具有 SlideUp 功能的按钮来关闭 div。 但是当我点击按钮时，它会按预期打开并关闭其他 div。但不关闭它会重新打开。

这是我的html代码

<div class="row all-row">
            <div class="col-lg-4">
                <div class="main-acc">
                <div class="brand-wrapper">
                    <img src="img.png" alt="">
                    <h5 class="p-3">Lorem</h5>
                    <div class="card-wrapper">
                        <div class="card border-0 text-center">
                            <h5>Ipsunlore</h5>
                            <p>
                                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius unde est ut consequatur error amet eligendi vero aut assumenda.
                            </p>
                            <a href="#" class="">Find</a>
                        </div>
                    </div>
                    <a class="btn d-flex justify-content-between align-items-center opener" href="#">
                        <h5 class="m-0">Lorem</h5> 
                        <i class="fa fa-chevron-up pl-3"></i>
                    </a>                        
                </div>
            </div>
            </div>
            <div class="col-lg-4">
                <div class="main-acc">
                <div class="brand-wrapper">
                    <img src="image.jpg" alt="">
                    <h5 class="p-3">Lorem</h5>
                    <div class="card-wrapper">
                        <div class="card border-0 text-center">
                            <h5>Mister: Ipsun</h5>
                            <p>
                                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius unde est ut consequatur error amet eligendi vero aut assumenda.
                            </p>
                            <a href="#" class="">From</a>
                        </div>
                    </div>
                    <a class="btn d-flex justify-content-between align-items-center opener" href="#">
                        <h5 class="m-0">Lorem</h5> 
                        <i class="fa fa-chevron-up pl-3"></i>
                    </a>                        
                </div>
            </div>
            </div>
        </div>

这里是 Jquery 代码：

<script>
    $(".opener").click(function(){
    $(".all-row").find(".card-wrapper").slideUp();
    $(this).closest(".card-wrapper").slideToggle(); 
    
    })
</script>

Answer 1

您使用.closest()，它会找到最接近的匹配父级。但是您需要的是.prev()，因为您要定位的元素是前一个兄弟元素...不是父元素。

另外，您应该使用.not() 将这个目标元素从“全部”.card-wrapper 集合中移除

$(".opener").click(function() {

  // The card previous to the clicked .card-opener anchor
  var this_card = $(this).prev(".card-wrapper")

  // Make sure all cards closes EXCEPT this one
  $(".all-row").find(".card-wrapper").not(this_card).slideUp();
  
  // Toggle this one
  this_card.slideToggle();

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


<div class="row all-row">
  <div class="col-lg-4">
    <div class="main-acc">
      <div class="brand-wrapper">
        <img src="img.png" alt="">
        <h5 class="p-3">Lorem</h5>
        <div class="card-wrapper">
          <div class="card border-0 text-center">
            <h5>Ipsunlore</h5>
            <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius unde est ut consequatur error amet eligendi vero aut assumenda.
            </p>
            <a href="#" class="">Find</a>
          </div>
        </div>
        <a class="btn d-flex justify-content-between align-items-center opener" href="#">
          <h5 class="m-0">Lorem</h5>
          <i class="fa fa-chevron-up pl-3"></i>
        </a>
      </div>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="main-acc">
      <div class="brand-wrapper">
        <img src="image.jpg" alt="">
        <h5 class="p-3">Lorem</h5>
        <div class="card-wrapper">
          <div class="card border-0 text-center">
            <h5>Mister: Ipsun</h5>
            <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius unde est ut consequatur error amet eligendi vero aut assumenda.
            </p>
            <a href="#" class="">From</a>
          </div>
        </div>
        <a class="btn d-flex justify-content-between align-items-center opener" href="#">
          <h5 class="m-0">Lorem</h5>
          <i class="fa fa-chevron-up pl-3"></i>
        </a>
      </div>
    </div>
  </div>
</div>