问题描述
我正在构建一个房产网站 HERE,其中有一个部分可以按项目选择房产。我使用光滑的属性列表和过滤器,如下图所示。
如果我第一次尝试点击基于项目的过滤器,它仍然正常。但是当屏幕调整大小并在移动视图中时,此过滤器不起作用。
这里有人能帮我处理这个错误吗?
这是我巧妙的过滤js代码:
$(document).ready(function(){
$('.slider__filter--item').on('click',function(){
let filterMenu = $(this).data('filter');
console.log(filterMenu);
console.log('.slider__filter--item[data-filter="' + filterMenu + '"]')
console.log('.slider-product#' + filterMenu)
$('.slider__filter--item').removeClass('active');
$('.slider-product').removeClass('active');
$('.slider__filter--item[data-filter="' + filterMenu + '"]').addClass('active');
$('.slider-product#' + filterMenu).addClass('active')
});
$('.slider__filter').slick({
autoplay:false,dots: false,arrows:false,infinite: false,slidesToShow: 5,slidesToScroll: 1,responsive: [
{
breakpoint: 1200,settings: {
slidesToShow: 4,slidesToScroll: 1
}
},{
breakpoint: 991,settings: {
slidesToShow: 3,{
breakpoint: 575,settings: {
slidesToShow: 2,]
});
$('.slider-product').slick({
autoplay:false,arrows:true,prevArrow: '<button class="slick-prev"><i class="fas fa-chevron-left"></i></button>',nextArrow: '<button class="slick-next"><i class="fas fa-chevron-right"></i></button>',slidesToShow: 3,responsive: [
{
breakpoint: 575,settings: {
slidesToShow: 1,]
});
});
HTML
@if (sizeof($data['PROPERTY']) > 0)
<section class="sections property-recommendation" id="section-property">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="font-size-40 section__title section__title--white">
{{ $data['LANDINGPAGE_PRODUCT_TITLE'] ?? 'title goes here' }}
</h2>
</div>
<div class="col-12">
<div class="tabs-filter">
<div class="mb-3 slider__filter">
@isset ($data['PROPERTY']['HOT'])
<div class="slider__filter--item active" data-filter="type-hot">
<a class="slider__filter--link">Hot</a>
</div>
@endisset
@foreach ($data['PROPERTY']['OTHERS'] as $key => $item)
<div class="slider__filter--item" data-filter="type-{{ preg_replace('/\s+/','-',$key) }}">
<a class="slider__filter--link">{{ $key }}</a>
</div>
@endforeach
</div>
</div>
@isset ($data['PROPERTY']['HOT'])
<div class="slider-product active" id="type-hot">
@foreach ($data['PROPERTY']['HOT'] as $item)
@include('components.image.property',['item' => $item])
@endforeach
</div>
@endisset
@foreach ($data['PROPERTY']['OTHERS'] as $key => $items)
<div class="slider-product" id="type-{{ preg_replace('/\s+/',$key) }}">
@foreach ($items as $item)
@include('components.image.property',['item' => $item])
@endforeach
</div>
@endforeach
</div>
</div>
</div>
</section>
@endif
CSS
.tabs-filter{
padding: 0 17%;
margin-bottom: 40px;
@media screen and (max-width:575px){
padding: 0 10%;
}
.slider__filter{
&--item{
text-align: center;
cursor: pointer;
padding: 10px 0;
&.active{
background-color: $orange;
border-radius: 14px;
.slider__filter--link{
opacity: 1;
}
}
}
&--link{
text-decoration: none;
outline: none;
color: #fff;
opacity: .5;
}
}
}
.slider-product{
display: block;
height: 0;
overflow: hidden;
position: unset;
&.active{
height: auto;
}
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)