Question

我正在使用这个阅读更多功能 https://css-tricks.com/text-fade-read-more/

在移动设备/平板电脑设备上观看并点击“阅读更多”按钮，然后更改设备的方向时，框的高度太大（从纵向移动到横向）或被切断（从横向移动）肖像）。

当方向改变时，jQuery中有没有办法重置这个高度？这是我正在使用的代码

<script>
var jq14 = jQuery.noConflict(true);
(function ($) {
    $(document).ready(function () {
        // your logic

        var mq = window.matchMedia("(min-width: 767px)");

        var $el, $ps, $up, totalHeight;

        $(".fade-box .button-read-on").click(function () {

            totalHeight = 0

            $el = $(this);
            $p = $el.parent();
            $up = $p.parent();
            $ps = $up.find("p:not('.read-more')");

            // measure how tall inside should be by adding together heights of all inside paragraphs (except read-more paragraph)
            $ps.each(function () {
                totalHeight += $(this).outerHeight();
                // FAIL totalHeight += $(this).css("margin-bottom");
            });

            $up
                .css({
                    // Set height to prevent instant jumpdown when max height is removed
                    "height": $up.height(),
                    "max-height": 9999
                })
                .animate({
                    "height": totalHeight
                })
                .click(function () {
                    //After expanding, click paragraph to revert to original state
                    $p.fadeIn();

                    if (mq.matches) {
                        $up.animate({
                            "height": 190
                        });
                    } else {
                        $up.animate({
                            "height": 210
                        });
                    }

                });

           // fade out read-more
           $p.fadeOut();

           // prevent jump-down
           return false;

       });
   });

}（jq14））;

Answer 1

您可以使用jQuery Mobile

中的方向更改

$(window).on("orientationchange",function(){
  //you can get the screen size
  var windowWidth = $(window).width(),
  var windowHeight = $(window).height();
  //some code
});

请注意，您将需要jQuery Mobile，我不确定它是否适用于常规jQuery，但值得一看

Answer 2

我试试这个。对我有用。享受=）

＆＃13;

wantarray

＆＃13;

设备方向更改时重置jquery max-height

2 个答案: