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

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，但值得一看