Jquery 再次单击时无法关闭 div

Posted 2023-02-25

【中文标题】Jquery 再次单击时无法关闭 div

【英文标题】：Jquery can't close div on click again

【发布时间】：2020-11-01 21:02:22

【问题描述】：

我试图通过单击具有 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" >
                    <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" >
                    <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>

【问题讨论】：

你用手风琴来做这个有意义吗？ getbootstrap.com/docs/4.3/components/collapse 我很难理解你想要的行为与你看到的行为。也许您可以尝试更清楚地解释这一点。

这当然有道理，但我正在努力学习 jquery。

每次.opener被点击.all-row内的每一个.card-wrapper都会关闭，无论它是否打开，因此点击.opener也总是会关闭closest.card-wrapper，即使它已经关闭，然后将其切换为打开状态。我建议使用状态类，例如 is-open。

对不起，我没听懂。

【参考方案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" >
        <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" >
        <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>

【讨论】：

非常感谢！我现在明白了。

我的荣幸。一个技巧：使用console.log() 函数进行调试。您会注意到控制台日志记录$(this).closest(".card-wrapper").length 中没有类card-wrapper 的父级。 ;)