我添加了 jQuery Toggle 函数，现在我的 CSS 响应代码已停止工作

Question

我最初在我的主页上的 div 类下有一栏最新新闻 - .latestNews。

但是我后来决定添加第二页新闻，用户可以在使用按钮和 jQuery 之间切换。现在我已经实现了这个，我有点困惑如何在从移动设备查看时使其“隐藏”。

我最初有一些 CSS 代码来简单地在小于 766px 的屏幕上查看时隐藏 div，但我认为这些代码现在与新的 jQuery 代码发生冲突。

这是 jQuery：

<script>
    $(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();
        });
    });
</script>

自从添加此功能后，该列不再隐藏在移动视图中

CSS：

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

Answer 1

好吧，您面临的问题是，自从您添加了用于在两个新闻页面之间切换的 jQuery 代码以来，该列并未隐藏在移动设备上。看起来 jQuery 代码并没有直接影响 .left 类的可见性，该类在样式表中用于隐藏小于 766px 的屏幕上的列。

要解决此问题，您需要调整 jQuery 代码以切换 .left 类的可见性。这是修改后的 jQuery 代码：

$(document).ready(function(){

$('.page2').hide();
$(".left").hide(); // Hide the .left column initially
$("#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();
    $(".left").toggle(); // Toggle the visibility of the .left column
});

});

此调整可确保 .left 列在页面加载时隐藏，并随着按钮触发的页面转换而切换。 .left 类是您在 CSS 中使用的类，用于在小于 766px 的屏幕上隐藏该列。