Question

我正在寻找可以通过页面上的按钮切换显示状态的最佳方式，但也可以根据媒体查询覆盖。在大屏幕上，我希望默认为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');
});

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

注意：这是codepen to play with。

Answer 1

您的解决方案远非最佳，除非将您的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');
});

Answer 2

我认为更好的方法是使用两个单独的样式表，一个使用水平布局，另一个使用垂直布局，然后可以在单击功能上切换样式表以获得首选布局。这是我发现的很快的链接。

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

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

2 个答案: