jQuery无法再次单击关闭div

问题描述

我正在尝试通过单击具有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>

解决方法

您使用.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>