gpt4 book ai didi

javascript - 移动响应式下拉导航栏适用于小宽度浏览器,但不适用于我的手机

转载 作者:行者123 更新时间:2023-11-28 01:27:41 25 4
gpt4 key购买 nike

移动响应式下拉导航栏适用于小宽度浏览器,但不适用于我的手机。当我使浏览器宽度 <1000 像素并单击下拉元素时,菜单出现,但是,当我尝试在手机上打开它时,没有任何反应。我完全不知道是什么原因造成的,因为我之前没有尝试过让我的网站响应,因此我知之甚少。

$('.dropdown').on('click', function() {
$('.container').children().toggle();
$('.dropdown').show();
$('.space').hide();
});
.navigation {
background-color: #151719;
}

.container {
display: flex;
}

.container>li {
padding: 10px;
text-align: center;
font-size: 1em;
color: white;
box-sizing: border-box;
background-color: #151719;
list-style-type: none;
}

.space {
flex: 1;
}

.dropdown {
display: none;
}

@media all and (max-width: 1100px) {
.container {
flex-wrap: wrap;
}
.container>li {
flex: 1 1 100%;
}
.space {
display: none;
}
.dropdown {
display: block;
}
.container>li {
display: none;
}
.container>.dropdown {
display: block;
cursor: pointer;
}
.dropdownImg {
float: right;
}
}

@media only screen and (max-width: 600px) {
.flex-grid-home {
display: none;
}
.flex-grid {
display: block;
}
.flex-grid {
margin-right: 10px;
margin-left: 10px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class='navigation'>
<div class="wrapper">
<ul class="container">
<li class='dropdown'></li>
<li class='ey'><a href="">1</a></li>
<li class='ey'><a href="">2</a></li>
<li class='ey'><a href="">3</a></li>
<li class='ey'><a href="">4</a></li>
</ul>
</div>
</nav>

最佳答案

我建议您检查是否在标题中添加了以下行:

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

如果没有添加,请在标题部分添加上面的代码。

<head>
<title>sample header</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

关于javascript - 移动响应式下拉导航栏适用于小宽度浏览器,但不适用于我的手机,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51154085/

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