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

时间:2017-12-04 09:03:31

标签: css css3 grid-layout css-grid

我试图创建一个可以在按钮点击上显示/隐藏的sidenav。 我已使用grid-areagrid-template-areas进行布局。 我有一个grid-area用于sidenav。我希望隐藏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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分: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;
});

答案 1 :(得分:0)

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