javascript 按钮破坏媒体查询样式

Question

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

这是 header 的示例 link：http://portalpacific.net/HAMGO_SmartBanner/

一旦滑块对任一选项可见。您可以选择 "back button"

所以我目前的问题是：当您按下后退按钮然后 re-expand 视口宽度时。然后你失去了一个滑块。只有在 re-expand 进入视口之前按下后退按钮才会发生这种情况。

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

这是我的移动按钮 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;
    }
}

javascript 按钮破坏媒体查询样式

javascript button breaking media query styles

html

javascript

css

jquery

media-queries