Question

我试图创建一个可以在按钮点击上显示/隐藏的sidenav。我已使用grid-area和grid-template-areas进行布局。我有一个grid-area用于sidenav。我希望隐藏sidenav时隐藏grid-area。是否有可能实现这一目标？

完整代码在此处 - https://codepen.io/devi_ks/pen/Ebddwo

＆＃13;

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

＆＃13;

#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"
}

＆＃13;

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

＆＃13;

Answer 1

您使用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;
});

Answer 2

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

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

2 个答案: