使用jQuery合并过滤器

Question

我已经编写了以下代码，但无法折叠在给定标题下方的filter选项。

 <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的click事件移到了覆盖所有字的标签h4上：

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

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

Answer 2

当您的.row1在DOM树下方时， closest()函数将在DOM树中进行搜索。 使用find()函数选择合适的元素：

$('.colit').click(function(){
  $(this).find('.row1').toggle();
  alert('Toggle');
});

Answer 3

您必须更改html和javascript。 标签范围必须包含其他元素。

<span class="glyphicon glyphicon-minus colit" aria-hidden="true"><h4>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>
    </span>

和JavaScript

    <script>
        $(document).ready(function(){
            $('.colit').click(function(){
                $(this).find('.row1').toggle();
            });
        });
    </script>