我想弄清楚一旦网站加载到手机/智能手机上或当我将浏览器调整为更小的窗口时如何隐藏下拉菜单。我创建的下拉菜单会立即显示,我必须触摸/单击菜单按钮才能将其隐藏。
这是我创建的网站
http://digitalspin.ph/test/manosa/campanilla-homepage/
这是我创建的代码
HTML
a#pull{
color: #FFF;
font-family:'Open Sans';
text-decoration: none;
float: left;
width: 54%;
text-align: right;
display: inline-block;
line-height: 67px;
}
Javascript
$(document).ready(function(){
$(function() {
var pull = $('#pull');
menu = $('#menu-primary-menu');
menuHeight = menu.height();
$(pull).on('click', function(e) {
menu.slideToggle("");
});
});
});
$(document).ready(function(){
$(window).resize(function(){
var w = $(window).outerWidth();
if(w > 400 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
})
$(document).ready(function(){
$(window).resize(function(){
var w = $(window).outerWidth();
if(w > 640 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
})
最佳答案
您可能需要考虑这种方法。
$(function(){
$("#pull").click(function(){
$("#menu-primary-menu").toggleClass("expanded");
});
});
然后一点点 CSS 来使这一切正常。
@media only screen and (max-width: 736px) {
.menu {
height: 0;
overflow: hidden;
}
.menu.expanded {
height: auto;
}
}
我在这里使用 736 的媒体查询一直定位到 iphone 6 +
这种方法在手机浏览器上要轻得多,而且对于更老的手机来说渲染速度通常要快一些。
关于javascript - 在手机上隐藏下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32491970/