javascript - 当我调整屏幕大小时，jQuery 一直在前面加上另一个按钮

Question

我试图在屏幕小于 480 像素时隐藏段落，并在前面添加一个“阅读更多”按钮以打开隐藏的段落。

我尝试了以下代码，但是，在调整屏幕大小后，所有其他屏幕尺寸的按钮现在都存在。关于我哪里出错的任何提示？

$(document).ready(function(){
        /*  Hide content and append a button to show more content
        ======================================================================== */
        $(window).resize(function() {
            if ($(window).width() <= 480) {
                $('#first_text_paragraphs').append('<button>Read More</button>');
            /* toggle Read more button
            ============================================= */
            $('button').on("click", function() {
                $('.about_text_paragraphs').slideToggle();
            });
            }
        });

    });

Answer 1

一般提示:

1. 无需附加该元素，只需让它始终存在，并使用 display CSS 属性根据需要切换它即可。

2. 如果您在宽度低于 480 像素时执行某些操作，则需要在宽度超过 480 像素时执行反向操作，否则您所做的任何操作都将继续存在。

3. 如果您打算在满足某些条件时向页面添加一个元素，您应该使用标志(或类似机制)来确保您不会多次添加该元素。例如，如果用户将大小调整为 470 像素，然后再次调整为 460 像素。您不想两次附加按钮。

4. Media queries是你的 friend 。他们可以用更少的代码做你想做的事。不过，我假设您对这里的程序化方法感兴趣。

具体来说，我大概会这样编码:

$(document).ready(function(){
    $('#readMore').on("click", function() {
        $('.about_text_paragraphs').slideToggle();
    });

    if ($(window).width() <= 480) {
        $("#readMore").show();
    }

    /*  Hide content and append a button to show more content
        ======================================================================== */
    $(window).resize(function() {
        if ($(window).width() <= 480) {
            $("#readMore").show();
        }
        else {
            $("#readMore").hide();
        }
    });

});

这是一个 fiddle :http://jsfiddle.net/FFuvG/

或者，您可以采纳 bjb568 的excellent 建议并简单地使用 CSS 媒体查询来完成同样的事情。