Append class 到 div 当屏幕尺寸低于断点

Question

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

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

• 当浏览器加载或调整大小并且低于769px时，我想将类名' is-right添加到我的下拉列表中。
• 如果屏幕大于769px ，我想删除is-right类名。

这是我目前拥有的：

<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>

class 名称必须附加在列表中： 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');
    }
});

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

Answer 1

这种方式应该工作（？）

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()我提出的第二个参数并通过测试回答解释， 它就在这里

Answer 2

首先我认为你的代码做你期望它做的事情，你应该改变这个： window.matchMedia("(min-width: 769px)").matches

至：

window.matchMedia('(max-width: 769px)').matches

这意味着当 window 的宽度低于 769px 时 matchMedia.matches 的计算结果为 true，而不是现在的 false。

这有效，随着变化：

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

    // min-width changed to max-width
if (window.matchMedia('(max-width: 769px)').matches) {
    dropdown.classList.toggle('is-right');
} else {
    dropdown.classList.remove('is-right');
}
});

最后，我认为在保持当前实现的同时稍微更优雅的解决方案是这样的：

window.addEventListener('load', (event) => {
    const dropdown = document.querySelector('.dropdown');
    dropdown.classList.toggle('is-right', window.matchMedia('(max- 
    width:769px)').matches);
});

window.addEventListener('resize', () => {
    const dropdown = document.querySelector('.dropdown');
    dropdown.classList.toggle('is-right', window.matchMedia('(max- 
    width:769px)').matches);
});

根据文档（ https://developer.mozilla.org/en-US/docs/Web/API/Element/classList ） classList.toggle() 允许在调用时设置条件。 我们只需将 matchMedia.matches 属性添加到条件语句中，该属性将评估为真或假。

更新

我找不到很多关于切换如何工作的信息，但经过一个小时左右的测试，如果条件语句评估为真，切换似乎会尝试添加提供的 class，如果条件语句评估为真，它将尝试删除它条件语句的计算结果为假。 因此，只需在文档加载时添加“正确”的 class（带有 classList.toggle），我们的其他“优雅”解决方案仍然可以完美地与之结合使用。 Codepen 已更新以反映这一点。 如果这对你有用，请告诉我，我希望我能提供帮助。

https://codepen.io/KXNG420/pen/yLaMQgV