Question

我正在建立一个响应迅速的网站，其中有几个价格和价格。计划＆＃39;的服务。但是，在小分辨率下，有很多信息要展示。所以我想使用滑块并显示每个价格＆amp;计划＆＃39;在一个滑块中。问题是，由于滑块的工作方式（在窗口加载时插入其他div），滑块不会激活。有谁知道另一种方法呢？

这就是我试图用Jquery做的事情：

$(document).ready(function() {

    $(window).load(function() {
        getWidthAndHeight();
    });
    $(window).resize(function() {
        getWidthAndHeight();
    });

   if ($(window).width() < 768) {   
        $('.e-price-sh').addClass('slider');
    } else {
        $('.e-price-sh').removeClass('slider');
    };

)};

Ps。：我能够得到我想要的结果，但是我必须在我的html中使用代码块，其中一个是隐藏了res的类。大于768，另一个隐藏为res。小于768

这是html，我想用e-price-sh类附加滑块：

    <h3>Prices & Plans</h3>

    <div class="e-price-sh">
        <div class="e-price-col">
        ...
        </div>

        <div class="e-price-col">
        ...
        </div>

        <div class="e-price-col">
        ...
        </div>

        <div class="e-price-col">
        ...
        </div>

        <div class="e-price-col">
        ...
        </div>
    </div>

Answer 1

使用媒体查询来实现：

.e-price-sh{display:none;}


 @media screen and (max-width:768px) {
    .e-price-sh{display:block;}
}

更重要的是：如果您使用Foundation。有一个名为.show-fow-small-only的类可以快速解决它。

活动滑块仅在小分辨率下

1 个答案: