javascript - 当窗口处于一定宽度时侧边栏消失

Question

我创建了一个带有侧边栏的网站。侧边栏已随着窗口缩小而改变大小，但页面上仍然没有足够的空间。所以我一直在四处寻找一种方法，当屏幕缩小时，我可以让侧边栏消失。还需要有一个按钮，您可以按下该按钮将侧边栏带回，直到您的鼠标不再位于该侧边栏上。我认为这对移动设备也有好处。我已经找了一段时间了，但似乎做不对。代码如下，任何人都可以提供帮助:)

body {
    margin: 0;
    background: -webkit-linear-gradient(left,  lightblue,#FFFF66, #FF3333 ); /* For Safari 5.1 to 6.0 */
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;

    position: fixed;
    height: 100%;
    overflow: auto;
    
}

li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

<ul>
  <li><a class="active" href="index.php">Home</a></li>
  <li><a href="messages/message.php">Messages</a></li>
  <li><a href="ask.php">ASK</a></li>
  <li><a href="cloud.php">Cloud Access</a></li>
   <li><a href="gallery.php">Gallery</a></li>
  <ul style="float:right;list-style-type:none;">
    <li><a href="#about">About</a></li>
    <li><a href="login.php">Login</a></li>
    
  </ul>
</ul>

目前它调整大小但我需要它在一定宽度处消失重新出现当低于宽度时你看不到它需要有一个按钮让它出现在宽度上最好是宽度我的代码已经说过要这样做了。如果你不能理解消息，我真的希望我能完成这个:)

Answer 1

你必须为你想隐藏侧边栏的特定尺寸写一个媒体查询将 id="toogleButton"放在你的按钮上

#toogleButton {display:none} //first hide this button on other sizes

@media screen and (max-width: 768px) {
ul{display:none;}
#toogleButton {display:block} // Show this button on 768 size
}

在这种情况下，您的侧边栏将隐藏在 768px 宽度上

你可以切换(隐藏或显示)这个侧边栏

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#toogleButton").click(function(){
        $("ul").toggle();
    });
});
</script>