默认情况下关闭javascript中的切换

Question

我有这个代码

$(".filter-tag-group .tag-group .show_filter_content").on('click', function() {
      var $icon = $(this).find('i').toggleClass('fa-plus fa-minus');
      var $group = $icon.closest('.tag-group');
      $group.find('.filter-title').toggleClass('active');
      $group.find('.filter-content').toggle();
});

结果是：

如您所见，默认情况下我所有的组都是打开的，我希望它们在页面加载时关闭（默认）。

HTML

<div class="collection-leftsidebar sidebar col-sm-3 clearfix">
  <div class="sidebar-block filter-block">
      <div class="sidebar-title">
        <span>{{ __('Advanced Search') }}</span>
        <i class="fa fa-caret-down show_sidebar_content" aria-hidden="true"></i>
      </div>

      <div id="tags-filter-content" class="sidebar-content">
        <div class="filter-tag-group">

        //this is the part that looping (need to  be closed)
        <div class="tag-group">
            <p class="title">
              <span class="filter-title show_filter_content">{{ __('Price Range') }} <span class="pull-right"><i class="fa fa-minus"></i></span></span>
            </p>
            <div class="row filter-content">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="min_price" hidden>{{ __('Min') }}</label>
                  <input type="text" name="min_price" class="form-control" placeholder="Rp Min">
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="max_price" hidden>{{ __('Max') }}</label>
                  <input type="text" name="max_price" class="form-control" placeholder="Rp Max">
                </div>
              </div>
            </div>
          </div>

  </div>
</div>

我应该更改脚本的哪一部分来实现该目标？

Answer 1

如何通过CSS隐藏它。 coz css将比javascript / jquery优先加载。因此，在您的情况下，您希望默认情况下将其隐藏，因此必须通过CSS完成。

.[class-name here] {
  display: none;
}

.[class-name here].active {
  display: block;
}