Question

所以我正在制作这个标题设计。它是响应。当你将视口宽度缩小到550px时，应该转向移动。显示按钮而不是右侧的滑块小部件。如果单击相应的按钮，则会显示正确的滑块。

以下是标题的示例链接：http://portalpacific.net/HAMGO_SmartBanner/

任一选项都可以看到滑块。您可以选择＆＃34;后退按钮＆＃34;

目前我的问题是：当你按下后退按钮，然后重新展开视口宽度。然后你失去了一个滑块。只有在重新展开视口之前按下后退按钮才会发生这种情况。

任何解决方案都将非常感激。开放的想法。

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

You have an error in your css

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

Change for this:

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

javascript按钮打破媒体查询样式

1 个答案: