javascript按钮打破媒体查询样式

Question

所以我正在制作这个页眉设计。它是有反应的。当您将视口(viewport)宽度缩小到刚好超过 550px 时，它应该转向移动设备。在右侧显示按钮而不是 slider 小部件。如果您单击适当的按钮，它会带入正确的 slider 。

这是 header 的示例链接:http://portalpacific.net/HAMGO_SmartBanner/

一旦 slider 对任一选项可见。您可以选择“后退按钮”

所以我目前的问题是:当您按下后退按钮然后重新扩展视口(viewport)宽度时。然后你失去了一个 slider 。仅当您在重新扩展视口(viewport)之前按下后退按钮时才会发生这种情况。

任何解决方案将不胜感激。开放的想法。

这是我的移动按钮的 javascript。我不是最好的 javascript。

<script>
$('.mobileAdultBtn').on('click', function () {
    $('#vContentLeft').css('display', 'block');  
    $('.vSlide-markersWrapper').css('margin-left', '-80px');
    $('.backBtn').css('display', 'block');
    $('.mobileAdultBtn').css('display', 'none');
    $('.mobileYoungAdultBtn').css('display', 'none');
    $('.productInfo_mobile').css('visibility', 'hidden');
});

$('.mobileYoungAdultBtn').on('click', function () {
    $('#vContentRight').css('display', 'block');  
    $('.vSlide-markersWrapper').css('margin-left', '-43px');
    $('.backBtn').css('display', 'block');
    $('.mobileAdultBtn').css('display', 'none');
    $('.mobileYoungAdultBtn').css('display', 'none');
    $('.productInfo_mobile').css('visibility', 'hidden');
});

$('.backBtn').on('click', function () {
    $('#vContentRight').css('display', 'none');
    $('#vContentLeft').css('display', 'none');
    $('.vSlide-markersWrapper').css('margin-left', '-19px');
    $('.backBtn').css('display', 'none');
    $('.mobileAdultBtn').css('display', 'block');
    $('.mobileYoungAdultBtn').css('display', 'block');
    $('.productInfo_mobile').css('visibility', 'visible');
});
</script>

谢谢!

Answer 1

你的CSS有错误

@media only screen and (min-width: 515px){
    #vContentRight, #vContentleft {
        display: block!important;
    }
}

为此改变:

@media only screen and (min-width: 515px){
    #vContentRight, #vContentLeft {
        display: block!important;
    }
}