Jquery 无法关闭 div 再次点击

Question

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

这是我的 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(), which finds the closest matching parent. But what you need is .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>

Jquery 无法关闭 div 再次点击

Jquery can't close div on click again

html

javascript

jquery

slideup

slidetoggle