对于小窗口大小，react侧边栏不会关闭

Question

我有一个反应侧边栏与纯粹的css展开/折叠动画，我真的喜欢。除了默认情况下，在本例中每次打开我的页面/ jsfiddle时，侧边栏都会默认关闭。

https://jsfiddle.net/martinradio/x1dz80a6/2/

我收集了css文件中的所有@media查询，并对其进行了更改，因此当窗口很大时，侧栏会变黄。如果窗口变小，侧边栏会变成红色。

我的侧边栏展开/折叠逻辑是纯css，如果窗口太小(边栏颜色=红色)，我希望侧边栏折叠，我可以添加一个.sidebar值来折叠侧边栏吗？

/* ----------------------
@media queries
 ---------------------- */

/* if screen is big: show sidebar */
@media (min-width: 30em) {
  .sidebar {
    background:yellow;
    color:yellow;
  }
}

/* if screen is too small: hide sidebar */
@media (max-width: 31em) {
  .sidebar {
  background:red;
  color:red;
  }
  /* add something here to toggle sidebar as higgen */
}

是否有一种方法，通过添加css，如果用户正在桌面监视器维度上查看页面，我可以展开侧栏start吗？但是将侧边栏隐藏在较小的浏览器窗口中，如移动窗口。

Answer 1

您需要输入的:checked值来确定侧栏的当前展开状态。

同时，您需要视图的大小来确定相同的状态。

这意味着您必须找到一种方法来允许视口大小来设置复选框的:checked值。

坏消息是，您不能单独使用CSS更改或设置复选框的值。

好消息是它可以使用JavaScript完成。您可以将其链接到媒体查询。

下面是如何在反应中做到这一点：

  // define media query:
  const mediaQuery = window.matchMedia("(min-width: 42rem)");

  // track query state (if it applies or not)
  const [query, setQuery] = React.useState(mediaQuery);

  // keep query state updated (+ cleanup)
  React.useEffect(() => {
    mediaQuery.addListener(setQuery);
    return () => mediaQuery.removeListener(setQuery);
  }, [mediaQuery]);

  // track sidebar expanded state
  const [expanded, setExpanded] = React.useState(query.matches);

  // update checkbox value when the query state changes
  React.useEffect(() => {
    setExpanded(query.matches);
  }, [query]);

  // everything else stays the same 
  // (except binding the expanded state to the checkbox)

看到它的作用：https://jsfiddle.net/websiter/td9rgcpq/

Answer 2

您可以使用CSS查询来根据屏幕大小确定要执行的操作。在这里，您可能希望根据屏幕大小更改侧栏的行为。

@media (max-width: 600px) { 

*This is for phones, for example (you might need to find more accurate pixel counts)*

}

@media (min-width: 601px) { 

*This is for laptops, for example (you might need to find more accurate pixel counts)*

}

Answer 3

当我研究我的答案时，我意识到这些要求对我来说并不清楚。

你想在大屏幕上放什么？我可以想出两种不同的选择。

1. 打开页面时不显示侧栏。相反，当您按下切换按钮时，它将与动画一起出现。
2. 当您打开页面时，侧边栏是可见的，当您按下切换按钮时会消失。它是否应该在页面加载时显示动画？

在这两种情况下，您都不希望在小屏幕上使用侧栏。

我仍然不明白以下的要求。

如果用户正在查看页面，比如桌面监视器维度，我可以展开我的侧边栏开始吗？

当用户在大屏幕上打开页面时，它应该是什么样的呢？大屏幕上侧边栏的初始状态是什么？是否希望边栏在页面加载时使用动画打开？

不管怎样，请找我下面的建议。

主要思想

当边栏选中#sidebar-checkbox复选框时，侧边栏变得可见。我建议将这种行为限制在足够大的屏幕上。换句话说，我们只将复选框状态与侧栏可见性绑定到大屏幕上。

在小屏幕上，侧栏总是隐藏的，因为我们将规则放在大屏幕的媒体查询下。

1.最初隐藏但在切换时出现

代码本身就说明了这一点。

@media (min-width: 30em) {
  #sidebar-checkbox:checked + .sidebar {
    z-index: 10;
    visibility: visible;
  }

  #sidebar-checkbox:checked ~ .sidebar, #sidebar-checkbox:checked ~ .wrap, #sidebar-checkbox:checked ~ .sidebar-toggle {
  -webkit-transform: translateX(0rem);
      -ms-transform: translateX(0rem);
          transform: translateX(0rem);
  }

  #sidebar-checkbox:checked ~ .wrap {
  -webkit-transform: translateX(14rem);
      -ms-transform: translateX(14rem);
          transform: translateX(14rem);
  }
}

我认为我们也应该只在大屏幕上显示复选框的标签。但我不想把你的风格搞得太乱，尽量把工作上的变化降到最低。

2.最初显示在大屏幕上

我们必须用:checked选择器替换:not(:checked)选择器。在这种情况下，侧栏在大屏幕上默认可见。

我们也可以显示在页面加载的侧边栏从左到右滑动的动画。您可能会在回答中找到对“加载上的css3过渡动画？”问题的一些解释。

请检查更新的JSFiddle与第二种情况的建议。

如果你的要求是对的，请告诉我。