响应元素显示:无;在移动宽度，然后通过javascript按钮返回，但显示的链接断开:block;

Responsive Elements display:none; at mobile width then brought back by javascript button but links break on display:block;

本文关键字：显示 返回 按钮 javascript block 断开 链接 元素 移动 响应 然后      更新时间：2023-09-26

好的，我有了交互式横幅。右边是两个带有特色产品的滑块。

设计反应灵敏。一旦达到移动宽度。（大约515像素或更低）右侧的滑块通过（显示：无媒体查询）消失，并被按钮取代。现在可以单击该按钮来显示相应的滑块。

问题是它现在的行为就像它的父div在滑块的顶部。或者类似的东西？一旦通过点击按钮并将（显示：无；）转为（显示：阻止；）将滑块内容带回视图，我就无法点击或使用任何滑块内容

这是我的按钮脚本。

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

任何帮助都会很棒！

请尝试此

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

第二步：如果另一个vContentContainer不是选定的，请隐藏它（或修改它的z-index）。

相关文章：