CSS grid - 单击按钮隐藏网格区域

Question

我正在尝试创建一个单击按钮即可 shown/hidden 的 sidenav。我在布局中使用了 grid-area 和 grid-template-areas。我有一个用于 sidenav 的 grid-area。我希望在隐藏 sidenav 时也隐藏 grid-area。有可能实现吗？

完整代码在这里 - https://codepen.io/devi_ks/pen/Ebddwo

$("a").on("click", function() {
  $("#sidenav").hide();
  return false;
});

#header {
  grid-area: header;
  border: 1px solid red;
}

#sidenav {
  grid-area: sidenav;
  border: 1px solid green;
}

#content {
  grid-area: content;
  border: 1px solid black;
}

body {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 0.5fr 2fr;
  grid-template-areas: "header header" "sidenav content"
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="header">
  <a href="#">Click me</a>
</div>
<div id="sidenav">
  <ul>
    <li> menu 1</li>
    <li> menu 2</li>
    <li> menu 3</li>
  </ul>
</div>
<div id="content">
  Some content goes here....
</div>

Answer 1

$("a").on("click", function(){
     if($("#sidenav").is(":visible")){
       $("#sidenav").hide();
       $("#content").hide();
     }else{
       $("#sidenav").show();
       $("#content").show();
     }
      return false;
    });

Answer 2

您使用grid-area，所以侧边导航的位置是在开始时分配的。如果你隐藏（甚至删除）侧边导航，这不会改变任何事情。你得玩点小把戏：
将第一列的宽度设置为 0 并更改 grid-gap，否则您将在左侧有一个（不需要的）间隙。

$("a").on("click", function() {
  $("#sidenav").hide(true);
  $("body").css("grid-template-columns", "0px 2fr");
  $("body").css("grid-gap", "10px 0px");
  return false;
});

CSS grid - 单击按钮隐藏网格区域

CSS grid - hide a grid-area on click of a button

css

grid-layout

css-grid