使用按钮和媒体查询切换显示状态

Toggle Display State with Button and Media Query

本文关键字：显示 状态 查询 媒体 按钮      更新时间：2023-09-26

我正在寻找一种最佳的显示状态方式，它可以通过页面上的按钮进行切换，但也可以基于媒体查询进行覆盖。在大屏幕上，我想默认为horiz布局，并提供切换vert布局的选项。在较小的屏幕上，我希望默认为vert布局，不允许切换。

我目前的解决方案依赖于级联来覆盖样式表中的样式，我希望避免这种情况，因为它要求我的样式按特定顺序排列。

HTML:

应用默认布局layout--horiz。还应用layout，以便用@media查询覆盖特定布局。

<div id='layout' class='layout layout--horiz'>
  <a href="#" id='btn'>Toggle</a>
  <p>This</p>
  <p>is</p>
  <p>a</p>
  <p>test</p>
</div>

CSS：

在小屏幕的@media查询中：隐藏切换，并将vert样式硬编码为layout样式以覆盖layout--horiz（如果应用）。

#btn {
  display: block;
}
.layout--horiz p {
  display: inline;
}
.layout--vert p {
  display: block;
}
@media screen and (max-width: 600px) {
  #btn {
    display: none;
  }
  .layout p {
    display: block;
  }
}

JS:

单击按钮切换特定的--horiz和--vert类。

$('#btn').click(function() {
  $('#layout').toggleClass('layout--vert layout--horiz');
});

这个解决方案运行良好，但我想知道是否有更好的方法来实现这一点。

注意：这是一个可以玩的电笔。

除非将JS包含在前端框架中，否则您的解决方案离最佳解决方案不远了。这可能就是为什么你会收到指导你进行代码审查的评论。若要改进您的解决方案，请仅使用一个状态更改选择器。这将调用布局layout--horiz的两个状态和一个默认状态。一旦您将媒体查询切换为选择大显示器而不是小显示器，就很容易进行此更改。

HTML:

<div id='layout' class='layout layout--horiz'>
  <a href="#" id='btn'>Toggle</a>
  <p>This</p>
  <p>is</p>
  <p>a</p>
  <p>test</p>
</div>

CSS：

#btn {
  display: none;
}
.layout p {
  display: block;
}
@media screen and (min-width: 601px) {
  #btn {
    display: block;
  }
  .layout.layout--horiz p {
    display: inline;
  }
}

JS:

$('#btn').click(function() {
  $('#layout').toggleClass('layout--horiz');
});

我认为更好的方法可能是有两个独立的样式表，一个是水平布局，另一个是垂直布局，然后你可以在点击功能上切换样式表以获得首选布局。这里有一个我很快就找到的链接。

https://www.developphp.com/video/JavaScript/Change-Style-Sheet-Using-Tutorial-CSS-Swap-Stylesheet

相关文章：