当我调整屏幕大小时，jQuery一直在准备另一个按钮

jQuery keeps prepending another button when I resize screen

本文关键字：一直 按钮 另一个 jQuery 调整 屏幕 小时      更新时间：2023-09-26

当屏幕小于480px时，我试图隐藏段落，并在前面加上一个按钮"阅读更多"以打开隐藏的段落。

我已经尝试了以下代码，然而，在屏幕调整大小后，按钮现在适用于所有其他屏幕大小。关于我哪里出了问题，有什么建议吗？

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

一般提示：

  1. 与其附加元素，不如让它始终存在，并根据需要使用displayCSS属性来切换它。

  2. 如果在宽度下降到480像素以下时执行某些操作，则需要在宽度超过480像素时执行相反的操作，否则您所做的操作将继续存在。

  3. 如果要在满足某些条件时向页面添加元素，则应使用标志（或类似机制）来确保不会多次添加该元素。例如，如果用户将大小调整为470像素，然后再次调整为460像素。您不希望将按钮追加两次。

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

具体来说，我会大致这样编码：

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

这是一把小提琴：http://jsfiddle.net/FFuvG/

或者，您可以接受bjb568的优秀建议，只需使用CSS媒体查询即可完成同样的任务。

jQuery滥用！使用CSS: 
@media screen and (max-width: 480px) {
    #mytext {
        max-height: 200px;
        overflow: hidden;
    }
    #mybutton {
        display: block;
    }
}

HTML:

<div id="mytext">lorem ipsum</div>
<button id="mybutton" hidden>Read More</button>

Fiddle

这应该比jQuery快得多（就像所有CSS一样）。

试试这个：

演示：http://jsfiddle.net/YEwUZ/514/

这是一个按钮显示的地方：http://jsfiddle.net/YEwUZ/515/

看看这个演示是否就是你试图通过移动输出区域的宽度来实现的。

HTML

<div class="button">
    This is a Button
</div>
<div class="mydiv">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

CSS

.button { 
    background:#fefefe;
    width:100px;
    text-align:center;
    margin:5px;
    padding:5px 15px; 
    border:1px solid #eee;
}
@media only screen and (max-width:480px) {
    .mydiv {display:none;}   
}
}

查询

$(document).ready(function(){
        $('.button').click(function() {
           if ( $( ".mydiv" ).is( ":hidden" ) ) {
            $('.mydiv').fadeIn();
           } else {
            $('.mydiv').fadeOut();
         }
      });
 });
相关文章：