Question

我正在尝试编写代码，当单击链接时，它会切换滑动相关 div 并隐藏所有其他 div。但是我面临的问题是，当我点击关闭同一个 div 然后它重新打开。

jQuery(document).ready(function($){
  var facetTitle = $('.facetwp-facet-title');
  facetTitle.on('click', facetAccordian);
  // Facet Accordian Function
    function facetAccordian(){
        var _this = $(this);
        $(".filters-holder .facetwp-facet-title").removeClass("opened");
        $(".filters-holder .facetwp-facet").slideUp("opened");
        var filters = _this.parent().find('.facetwp-facet');
        _this.toggleClass('opened');
        filters.slideToggle();
    }
});

.facetwp-facet {
        display:none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filters-holder">
    <div class="fl-col">
        <div class="facetwp-bb-module">
            <h4 class="facetwp-facet-title">Type</h4>
            <div class="facetwp-facet">
                Content Here
            </div>
        </div>  
    </div>
    <div class="fl-col">
        <div class="facetwp-bb-module">
            <h4 class="facetwp-facet-title">Size</h4>
            <div class="facetwp-facet">
                Content Here
            </div>
        </div>  
    </div>
</div>

Answer 1

基本我们必须检查您点击的那个是否已经“打开”

var opened = _this.hasClass("opened");

然后我们可以使用它来决定是否切换类。

if (!opened) {
  _this.toggleClass('opened');
  filters.slideToggle();
}

演示

jQuery(document).ready(function($) {
  var facetTitle = $('.facetwp-facet-title');
  facetTitle.on('click', facetAccordian);
  // Facet Accordian Function
  function facetAccordian() {
    var _this = $(this);
    var n = _this.hasClass("opened");
    $(".filters-holder .facetwp-facet-title").removeClass("opened");
    $(".filters-holder .facetwp-facet").slideUp("opened");
    var filters = _this.parent().find('.facetwp-facet');
    if (!n) {
      _this.toggleClass('opened');
      filters.slideToggle();
    }
  }
});

.facetwp-facet {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filters-holder">
  <div class="fl-col">
    <div class="facetwp-bb-module">
      <h4 class="facetwp-facet-title">Type</h4>
      <div class="facetwp-facet">
        Content Here
      </div>
    </div>
  </div>
  <div class="fl-col">
    <div class="facetwp-bb-module">
      <h4 class="facetwp-facet-title">Size</h4>
      <div class="facetwp-facet">
        Content Here
      </div>
    </div>
  </div>
</div>

显示/隐藏相同的 div 并关闭所有其他 div

1 个答案: