<script>
function toggleSidebar()
{
document.getElementById("sidebar").style.display = "none";
}
</script>
</head>
<body>
<div class="col-md-12 col-sm-12">
<nav class="navbar navbar-default cs-navabar navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img class="left-logo" src="lefttoplogo.svg">
<h6 class="emotext"><u>login</u></h6> <img class="right" src="rtlogotop.svg">
<p class="logout-text"><u>LOGOUT</u></p>
</a>
</div>
</div>
</nav>
</div>
<div id= "sidebar">
<div class="toggle-btn" onclick="toggleSidebar()">
<span></span>
<span></span>
<span></span>
</div>
<img class="adminlogo" src="admin.svg">
<ul>
<img src="Untitled-3.svg">
<li>Add </li>
<li>View</li>
<li>App</li>
<li>Add</li>
<li>SMS </li>
<li>Edit</li>
<li>SMS</li>
<li>Contact</li>
</ul>
</div>
上面是左侧边栏的代码片段,我面临着有关带有侧边栏的移动设备的响应问题,当屏幕宽度减小时它不会隐藏。请问是否有人可以帮助解决上述问题?
最佳答案
您可以使用 window.width
编写一个函数,这样只要宽度小于 480,您就可以定位要隐藏的元素。像这样:
function navigation() {
if (window.width <= 480) {
document.getElementById("sidebar").style.display = "none";
}
}
关于html - 左侧栏响应问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48315255/