时间戳

首页 > 解决方案 > 当屏幕大小低于断点时将类附加到 div

javascript - 当屏幕大小低于断点时将类附加到 div

问题描述

因此，我在执行某些项目时遇到了一些麻烦，我想看看是否可以从一些专家那里获得有关如何执行此操作的帮助：

所以这就是我想要实现的目标：

这是我目前拥有的：

<div class="level-item">
    <div class="dropdown is-hoverable is-clickable">
        // Empty
    </div>
</div>
<div class="level-item">
    <div class="dropdown is-hoverable is-clickable">
        // Empty
    </div>
</div>

类名必须附加在列表中：dropdown is-hoverable is-clickable，所以它是这样的：dropdown is-hoverable is-clickable is-right。

window.addEventListener('resize', () => {
    const dropdown = document.querySelector('.dropdown');

    // If window screen is at least 500px
    if (window.matchMedia("(min-width: 769px)").matches) {
        dropdown.classList.toggle('is-right')
    } else {
        dropdown.classList.remove('is-right');
    }
});

上面的代码段由于某种原因不会附加.is-right到我的下拉列表中，请记住我有多个 .dropdown 类。

标签： javascript

解决方案

这种方式应该工作（？）

function Sizing4isRight() 
  {
  let classOnOff = window.matchMedia('(max-width: 769px)').matches  
    ;
  document
  .querySelectorAll('.dropdown')
  .forEach(el=>el.classList.toggle('is-right', classOnOff))
  } 

document.addEventListener('DOMContentLoaded', Sizing4isRight )
window.addEventListener('resize', Sizing4isRight )

[编辑] KXNG备注和对话后更改

有关更多信息classList.toggle()，我提出的第二个论点并通过测试回答了解释，就在这里

推荐阅读