我试图创建一个可以在按钮点击上显示/隐藏的sidenav。
我已使用grid-area
和grid-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;
答案 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;
});