javascript - 响应元素显示 :none; at mobile width then brought back by javascript button but links break on display:block;

Question

好的，我有交互式横幅。右侧是 2 个带有特色产品的 slider 。

设计是响应式的。一旦达到移动宽度。 (大约 515 像素或更小)右侧的 slider 通过 (display:none media queries) 消失并被按钮取代。您现在可以单击该按钮以显示相应的 slider 。

问题是它现在的行为就像它的父 div 在 slider 的顶部一样。或类似的东西？一旦通过单击按钮并将 (display:none;) 转到 (display:block;) 带回 View ，我将无法单击或使用任何 slider 内容

这是我的按钮脚本。

 <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>

这是我元素的链接:http://portalpacific.net/HAMGO_SmartBanner/

任何帮助都会很棒!

Answer 1

请试试这个

第一步:删除 pointer-events: none; in @media only screen and (max-width: 515px) .vContentContainer

第二步:如果另一个vContentContainer不是选中的，请隐藏(或修改它的z-index)。