javascript - 在移动设备上滚动时出现不需要的行为(根据视口(viewport)大小添加/删除类)

Question

我的代码根据视口(viewport)大小添加或删除类。在桌面版上一切正常。即使调整浏览器窗口大小时，一切正常。但是，我在移动设备(例如 iPhone - Safari)上遇到以下问题:

如果我打开 readmore 部分，它会在我向上或向下滚动页面后立即再次关闭(有时仅在几秒钟后)。这种行为可能是什么？为什么它在桌面版本中起作用，但在移动设备上不起作用？

这是我的代码:

HTML 模板:

<div class="description" >
    <h2 class="sectionheading">Information for <?= $entry->field('title')->value() ?></h2>
    <div class="readmore readmoresection" itemprop="description"><?= $entry->field('description')->value() ?></div>
</div>

jQuery:

function onResizeReadMoreLayout(){
    if ($(window).width() <= 900) {
                $('.readmoresection span.handler').show();
                $('.readmoresection').addClass('reduced');
                if($('.readmoresection').hasClass('reduced')){
                    $('.readmoresection span.handler').html(' » Weiterlesen');
                }else{
                    $('.readmoresection span.handler').html(' » Schließen');
                    $('.readmoresection').removeClass('reduced');
                }
            }
            else{
                $('.readmoresection span.handler').hide();
                $('.readmoresection').removeClass('reduced');
        }  
}

// initial state
 onResizeReadMoreLayout();
 // on resize
 $(window).on('resize', onResizeReadMoreLayout);

这是有效的实时版本:CLICK .查看标题“INFORMATIONEN ZUM FERNSTUDIUM FITNESS C-LIZENZ”后的阅读更多功能

Answer 1

当您在 iOS 上向上滚动时，readmore 部分会立即关闭，因为地址栏会改变高度和/或出现底部操作栏，从而导致窗口大小调整。然而，这里提出了另一个完全基于 CSS 的解决方案，因此您不仅可以避免您的问题，还可以避免 Javascript 不必要的膨胀。

这是建议的解决方案。我尝试在您的代码中使用类似的类，以使其更有意义。

此外，作为旁注，出于性能原因，请尽可能将 Javascript 监听器减少到最低限度，尤其是像 resize 或 scroll 这样的监听器。

最后但同样重要的是，根据浏览器和浏览器滚动条类型，$(window).width() 很容易产生不同的结果 - 即 900px与 900px + 滚动条宽度 相比。

HTML:

<div class="readmoresection">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sagittis id consectetur purus ut faucibus pulvinar elementum. Gravida neque convallis a cras semper auctor neque vitae. Magna sit
    amet purus gravida quis blandit. Dignissim cras tincidunt lobortis feugiat vivamus at. Leo a diam sollicitudin tempor. Consectetur adipiscing elit ut aliquam purus sit amet luctus. Nisl purus in mollis nunc sed id. Auctor elit sed vulputate mi sit
    amet. Quam elementum pulvinar etiam non. Ultricies mi eget mauris pharetra et ultrices neque ornare aenean. Eget felis eget nunc lobortis mattis aliquam. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Faucibus ornare suspendisse
    sed nisi lacus. Amet mauris commodo quis imperdiet massa tincidunt nunc. Dolor sit amet consectetur adipiscing elit. Fames ac turpis egestas sed tempus. Egestas tellus rutrum tellus pellentesque.
  </p>
  <p class="content-hidden">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sagittis id consectetur purus ut faucibus pulvinar elementum. Gravida neque convallis a cras semper auctor neque vitae. Magna sit
    amet purus gravida quis blandit. Dignissim cras tincidunt lobortis feugiat vivamus at. Leo a diam sollicitudin tempor. Consectetur adipiscing elit ut aliquam purus sit amet luctus. Nisl purus in mollis nunc sed id. Auctor elit sed vulputate mi sit
    amet. Quam elementum pulvinar etiam non. Ultricies mi eget mauris pharetra et ultrices neque ornare aenean. Eget felis eget nunc lobortis mattis aliquam. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Faucibus ornare suspendisse
    sed nisi lacus. Amet mauris commodo quis imperdiet massa tincidunt nunc. Dolor sit amet consectetur adipiscing elit. Fames ac turpis egestas sed tempus. Egestas tellus rutrum tellus pellentesque.
  </p>
  <span class="handler"><span class="handler-opened">Toggle close</span><span class="handler-hidden">Toggle open</span></span>
</div>

CSS:

@media (max-width:900px) {
  .content-hidden {
    display: none;
  }
  .handler-opened {
    display: none;
  }
  .opened .handler-opened {
    display: block;
  }
  .opened .handler-hidden {
    display: none;
  }
  .opened .content-hidden {
    display: block;
  }
}

@media (min-width:901px) {
  .content-hidden {
    display: block !important;
  }
  .handler {
    display: none;
  }
}

Java 脚本:

$('.readmoresection').on('click', 'span.handler', function() {
  $(this).closest('.readmoresection').toggleClass('opened');
});

这是一个有效的 fiddle :https://jsfiddle.net/scooterlord/dLjygyrj/