Question

我想创建一个与引导程序中的列重叠的边栏。当我单击屏幕上的button时，将出现侧边栏，而当我单击x时，该栏将消失。我正在为页面使用Bootstrap行和列布局。由于某些原因，该栏会移至页面底部，并且该按钮不会响应我的点击。

我的HTML是：

<body class="container-fluid">
<div class="row>
 <div class="col-8">...</div> 
 <div class="col-4">...</div> 
 <div id="mySidenav"></div> 
</div>
<span id="pr-btn" style="position:fixed;font-size:30px;cursor:pointer">&#9776; open</span>
</body>.

我的CSS是

#mySidenav {
 position: abolute; 
 width: 0; 
 right: 0; 
 height: 100%; 
 background-color: #123456
}

我的JQuery是

$("#pr-btn").click(() => {
  let width = $("#mySidenav").css("width");
  if(width == 0) {
    $("#mySidenav").css("width", "33.3%");
  } else {
    $("#mySidenav").css("width", "0");
  }
})

Answer 1

我可以使用以下方法解决该问题：

$("#pr-btn").click(()=>{
  $("#originalColumn").fadeOut();
  $("#mySidenav").fadeIn();
});

也欢迎其他解决方案。

如何创建将与Bootstrap列重叠的边栏

1 个答案: