javascript - 使用 jQuery 折叠过滤器

Question

我编写了以下代码，但无法折叠过滤器选项，该选项位于给定标题的正下方。

 <h4><span class="glyphicon glyphicon-minus colit" aria-hidden="true"></span>DISCOUNTS</h4>
                     <div class="row row1 scroll-pane">
                         <div class="col col-4">
                                <label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>Upto - 10% (20)</label>
                         </div>
                         <div class="col col-4">
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>70% - 60% (5)</label>
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>50% - 40% (7)</label>
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>30% - 20% (2)</label>
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>10% - 5% (5)</label>
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>30% - 20% (7)</label>
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>10% - 5% (2)</label>
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Other(50)</label>
                         </div>
                     </div>

<h4><span class="glyphicon glyphicon-minus colit" aria-hidden="true"></span>Type</h4>
                        <div class="row row1 scroll-pane">
                            <div class="col col-4">
                                <label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>Alla (30)</label>
                            </div>
                            <div class="col col-4">
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Amante   (30)</label>
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Roxy      (30)</label>
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>River Land        (30)</label>
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Penny  (30)</label>
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>N-Gal  (30)</label>
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Penny  (30)</label>
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>N-Gal  (30)</label>
                            </div>
                        </div>

这是我的 jQuery 函数来折叠它:

<script>        
$('.colit').click(function(){
  $(this).closest('.row1').toggle();
alert('Toggle');
});
</script>       

当单击按钮但未切换过滤器详细信息时，将调用此函数。

Answer 1

我修改了js，你可以在这里找到它https://jsfiddle.net/giuseppe_straziota/k8pvbmdq/

我认为该事件尚未启动，因为如果您单击“DISCOUNT”一词，您就超出了“colit”类的范围，因此我已将点击事件移至涵盖所有单词的标签 h4 上，在这样:

$(document).ready(function(){
      $('h4').click(function(){

      var panel = $(this)[0].nextElementSibling;
      $(panel).toggle();
      alert('Toggle');
      });
});