Question

我试图在屏幕小于480px时隐藏段落，并在前面添加一个按钮＆＃34;阅读更多＆＃34;打开隐藏的段落。

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

$(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

一般提示：

不要追加元素，只需将其放在那里，然后使用display CSS属性根据需要切换它。
如果在宽度低于480像素时执行某些操作，则需要在宽度超过480像素时执行反向操作，否则您所做的任何操作都将继续存在。
如果您在满足某些条件时要向页面添加元素，则应使用标记（或类似机制）以确保您不会多次添加元素。例如，如果用户调整为470像素，然后再调整为460像素。你不想两次追加按钮。
Media queries是你的朋友。他们可以用更少的代码做你想做的事。但是，我假设您对这里的程序化方法感兴趣。

就细节而言，我会大致这样编码：

$(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媒体查询即可完成相同的操作。

Answer 2

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一样）。

Answer 3

试试这个：

样本： 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;}   
}
}

<强> JQUERY

$(document).ready(function(){
        $('.button').click(function() {
           if ( $( ".mydiv" ).is( ":hidden" ) ) {
            $('.mydiv').fadeIn();

           } else {
            $('.mydiv').fadeOut();

         }
      });
 });

当我调整屏幕大小时，jQuery会继续添加另一个按钮

3 个答案: