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上移动了包含所有单词的click事件，这样：

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

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

Answer 2

当.row1低于它时，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>

使用jQuery对Collpasing进行过滤

3 个答案: