javascript - 从横向切换到纵向视图时阅读更多阅读更少功能不起作用

Question

我正在尝试实现阅读更多/阅读更少的功能，我正在使用两个函数 hidecontent 和 show content 基本上计算高度，另一个将 max-height 设置为 none 以显示全文，我正在使用 readmore 阅读less 处理程序，它基本上检查 readmore 扩展类是否存在，并相应地触发显示和隐藏功能。该实现在桌面设备上运行良好，但在 Ipad 中从 potrait 更改为横向并单击 readless 需要单击两次才能更改。

\\js code

$(document).ready(function() {
    let $readMoreBlock = $('.toggle-readmore');
    let $readmoreLessBtn = $readMoreBlock.find('.toggle-readmore__btn');

    /**
     * Function to hide the content
     * @param {object} $contentBlock - Jquery object
     */
    function _hideContent($contentBlock) {
        let lineHeight = parseInt($contentBlock.find('p').css('line-height').replace('px', ''));

        if(lineHeight*3 < $contentBlock.height()) {
            $contentBlock.parents('.toggle-readmore').addClass('readmore-enabled');
            let extHeight = parseInt($contentBlock.css('padding-top').replace('px', '')) + parseInt($contentBlock.css('margin-top').replace('px', ''));
            $contentBlock.css({ 'max-height': lineHeight * 3 + extHeight });
            $contentBlock.find('.toggle-readmore__ellipsis').css({ 'line-height': lineHeight + 'px', 'height': lineHeight });
        }
    }

    /**
     * Function to show the hidden content
     * @param {object} $contentBlock - Jquery object
     */
    function _showContent($contentBlock) {
        $contentBlock.css({ 'max-height': 'none' });
    }

    /**
     * Function called on read more and read less button clicks
     */
    function _readmoreLessHandler() {
        let $blockToToggle = $(this).parents('.toggle-readmore');
        if ($blockToToggle.hasClass('readmore-expanded')) {
            _hideContent($blockToToggle.find('.toggle-readmore__content'));
            $blockToToggle.removeClass('readmore-expanded');
        } else {
            _showContent($blockToToggle.find('.toggle-readmore__content'));
            $blockToToggle.addClass('readmore-expanded');
        }
    }

    /**
     * Initialize all readmore blocks by hiding the content
     */
    function _init() {
        $readMoreBlock.each(function() {
            _hideContent($(this).find('.toggle-readmore__content'));
        });
    }

    /**
     * Initiate Readmore functionality if toggle-readmore element exists
     */
    if ($readMoreBlock.length) {
        $readmoreLessBtn.on('click', _readmoreLessHandler);
        _init();
        $(window).on('resize', _init);
    }
});

\\html 
<div class="toggle-readmore__content" style="max-height: 82.5px;">
                                <div class="wm-redesign"><p class=" wm-disclaimer">MoneyCard must be successfully activated by 7/15/21. Your new payroll or government benefits direct deposit of $500+ must post to your account by 8/15/21, then a $20 credit will be applied to your account by the 10th business day of the month following your qualifying deposit. A qualifying new payroll or government direct deposit is defined as a direct deposit that has not appeared on an account within the past 30 days. 1 credit/customer. <a href="https://stage.walmartmoneycard.com/overdraft-protection" target="_self"><u>See more</u></a> on overdraft protection.</p>
</div>

                                <span class="toggle-readmore__ellipsis" style="line-height: 22.5px; height: 22.5px; font-size: 15px;">...</span>
                            </div>

<button class="toggle-readmore__btn">
                            <span class="toggle-readmore__btn--more">read more</span>
                            <span class="toggle-readmore__btn--less">read less</span>
                        </button>

\\css code

.toggle-readmore {    
    &__content{
        overflow: hidden;
        position: relative;
        padding-top: 30px;
    }

    &__content p,
    .toggle-readmore__btn {
        font-size: 11/@rem;
        line-height: 1.5;

        @media (min-width: @large) {
            font-size: 15/@rem;
        }   
    }

    &__ellipsis,
    &__btn,
    &__btn--less {
        display: none;
    }

    &.readmore-enabled {
        .toggle-readmore__ellipsis {
            display: inline;
            position: absolute;
            background-color: @white;
            background: linear-gradient(to right, rgba(255, 255, 255, 0), white 44%, white);
            color: initial;
            bottom: 0;
            right: 0;
            text-align: center;
            max-width: 482/@rem;
            margin-left: auto;
            width: 40/@rem;
        }

        .toggle-readmore__btn {
            .wm-text-bold(); 
            display: block;
            color: @walmartBlue;
            outline: 0;
            margin-top: 10px;
        }
    }

    &.readmore-expanded {
        .toggle-readmore__ellipsis {
            display: none;
        }
        .toggle-readmore__btn--less {
            display: inline;
        }
        .toggle-readmore__btn--more {
            display: none;
        }
    }    

    p {
        margin-bottom: 0!important;
    }
}

提前致谢

标签： javascripthtmljquerycss