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

【问题标题】：reset jquery max-height when device orientation changes当设备方向改变时重置jquery max-height
【发布时间】：2016-07-13 00:55:11
【问题描述】：

我正在使用这个阅读更多功能 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));

【问题讨论】：

标签： jquery html css reset

【解决方案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，但值得一看

【讨论】：

感谢您的快速回复。 jQuery 不是我的强项，你能告诉我这适合我的代码吗？
当然，但首先我需要了解您要做什么...是调整元素的高度和宽度以匹配设备的高度和宽度吗？
感谢您的帮助，但我决定使用其他选项。

【解决方案2】：

我试试这个。它对我有用。享受 =)

window.addEventListener("orientationchange", function() {
   // Announce the new orientation number
   //alert(screen.orientation);
   var windowWidth = $(window).width();
   var windowHeight = $(window).height();
   alert("width = " + windowWidth+"  " +" height = "+ windowHeight);
	
}, false);

【讨论】：

谢谢，但这不是我所追求的。我需要 totalHeight 重新加载。