添加jQuery Toggle函数后CSS响应式代码失效问题求助

问题根源 #

1. 内联样式优先级冲突：你的.left元素直接写了内联样式style="display: block;"，内联样式的优先级远高于媒体查询中的CSS规则，导致display: none被完全覆盖。
2. jQuery动画的内联样式残留：fadeIn()方法会自动给目标元素添加内联的display: block属性，即使屏幕尺寸缩小到766px以下，这个内联样式依然会阻止媒体查询的隐藏规则生效。

分步解决方案 #

1. 移除内联样式

直接删掉HTML中.left元素的style="display: block;"：

<!-- 修改前 -->
<div class="left" style="display: block;">

<!-- 修改后 -->
<div class="left">

2. 强化媒体查询规则（可选，确保优先级）

如果担心其他样式干扰，可以给媒体查询的规则加上!important，强制覆盖其他可能的display设置：

/* Mobile devices */
@media screen and (max-width: 766px) {
    .row .left {
        display: none !important;
    }
}

3. 处理窗口 resize 时的状态（可选，优化体验）

添加窗口尺寸变化监听，确保在用户调整屏幕大小时，新闻栏的状态符合响应式规则：

$(document).ready(function(){
    // 原有代码保留
    $('.page2').hide();
    $("#buttonPrev").toggle();

    $("#buttonNext, #buttonPrev").on('click', function() {
        var currentPage = $(this).attr('id') === "buttonNext" ? $('.page1') : $('.page2');
        var nextPage = $(this).attr('id') === "buttonNext" ? $('.page2') : $('.page1');

        currentPage.fadeOut('slow', function() {
            nextPage.delay(100).fadeIn('slow');
        });

        $("#buttonNext, #buttonPrev").toggle();
    });

    // 新增resize监听
    $(window).on('resize', function() {
        var windowWidth = $(window).width();
        if (windowWidth <= 766) {
            $('.left').hide();
        } else {
            // 非移动端时，保持当前分页的显示状态
            if (!$('.page1').is(':visible')) {
                $('.page2').show();
            } else {
                $('.page1').show();
            }
        }
    });

    // 页面加载时先执行一次resize逻辑，确保初始状态正确
    $(window).trigger('resize');
});

原理说明 #

• 移除内联样式后，媒体查询的CSS规则才能正常生效。
• !important可以强制覆盖jQuery动画添加的内联display属性（如果不用这个，也可以在resize事件里直接用jQuery的hide()/show()来控制，效果一致）。
• 窗口resize监听确保用户调整屏幕尺寸时，界面状态能实时适配。

内容的提问来源于stack exchange，提问作者codedbyjosh