JavaScript按鈕突破媒體查詢風格

Question

所以我做這個頭設計。它響應迅速。當您將視口寬度降低到550像素時，它應該轉向移動。顯示按鈕，而不是右側的滑塊小部件。如果您單擊相應的按鈕，它將引入正確的滑塊。

這裏是報頭的樣本鏈接：http://portalpacific.net/HAMGO_SmartBanner/

一旦滑塊爲任一選項可見。你可以選擇「後退按鈕」

所以我當前的問題：當你按下後退按鈕，然後重新展開視口寬度。你然後失去其中一個滑塊。這隻有在重新展開視口之前按下後退按鈕纔會發生。

任何解決方案將不勝感激。打開想法。

這是我的手機按鈕的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; 
    } 
}