gpt4 book ai didi

jquery - 我的响应式菜单在移动设备上不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 10:13:12 25 4
gpt4 key购买 nike

我制作了一个响应式菜单栏,它在屏幕ma​​x-width=850 像素 中折叠。它在不同尺寸的桌面 中正常工作。但不适用于移动设备

  

$(document).ready(function(){
$(".showMenu").click(function(){
$(".objs").slideToggle("slow");
});
});
   

#menu{
background-color: gray;
height: 50px;
}

.obj{
display: inline-block;
background-color: wheat;
margin: 2px;
width: 100px;
text-align: center;
height: 26px;
border:0;
}

.showMenu {
display: none;
height: 100%;
background-color: inherit;
border: 0;
color: black;
outline: 0;
}
@media screen and (min-width: 850px){
.objs{
display: block !important;
}
.obj{
display: inline-block !important;
}
.showMenu{
display: none;
}

}
@media screen and (max-width: 850px){
.objs{
display: none;
width: 100%;
background-color: wheat;
}
.obj{
width: 90%;
}
.showMenu{
display: block;
}

}
<!DOCTYPE html>
<html>
<head>
<title>Responsive Menu</title>
<link rel="stylesheet" type="text/css" href="menu.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

</head>
<body>
<div id="menu">
<button class="showMenu">MENU</button>
<div class="objs">
<button class="obj">1</button>
<button class="obj">2</button>
<button class="obj">3</button>
<button class="obj">4</button>
<button class="obj">5</button>
<button class="obj">6</button>
</div>
</div>
</body>
</html>

最佳答案

只需在下面添加编码的 html 标题标记

<meta name="viewport" content="width=device-width, initial-scale=1">

关于jquery - 我的响应式菜单在移动设备上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37430054/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com