<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>
上面是左侧边栏的代码片段,我正面临有关侧边栏移动设备响应性的问题,当屏幕宽度减小时它不会隐藏。如果有人可以帮助解决上述问题吗?
答案 0 :(得分:1)
您可以使用window.width
编写一个函数,因此每当宽度小于480时,您就可以定位要隐藏的元素。像这样:
function navigation() {
if (window.width <= 480) {
document.getElementById("sidebar").style.display = "none";
}
}
答案 1 :(得分:0)
如果您只想隐藏它,请使用:
@media(max-width: 420px) {
#sidebar {
display: none;
}
}