gpt4 book ai didi

javascript - 响应式 jquery 导航交互 - 调整大小问题

转载 作者:行者123 更新时间:2023-11-28 08:15:34 25 4
gpt4 key购买 nike

要求:900 像素或以上的水平导航和 900 像素以下的垂直导航。但在900以下,nav应该默认隐藏,只有在点击“header”时才会出现

我目前拥有的: http://jsfiddle.net/0rmgpjtr/3/

   $(document).ready(function(){

$('.dropdown ul:first').show();
$('.dropdown ul:first').css("display:table");
$('.dropdown li').click(function (e) {
$(this).addClass('active').siblings('li').removeClass('active');
$(this).children('ul').slideToggle('fast');
$(this).siblings('li').find('ul').slideUp('fast');
e.preventDefault();
e.stopPropagation();

});
$(document).on('click', function (event) {
$('.dropdown li').children('ul').slideUp('fast');
});

});
$(window).on("resize", function () {

if($(window).width()<=900){
console.log("800");
$('.ch-logo').bind('click',function(){
$('.dropdown').slideToggle('fast');
})
}else{
console.log("900+");
$('.ch-logo').unbind()
}

}).resize();

问题:1.绑定(bind)和解除绑定(bind)标题点击事件不起作用2. 当我点击父链接打开子导航时,在我调整浏览器大小后它会闪烁 - 实际上任何交互都会开始闪烁菜单,可能是因为它与调整大小功能相关。

最佳答案

http://jsfiddle.net/extca38f/

$(window).on("resize", function () {

if($(window).width()<=900){
console.log("800");
$('.dropdown').hide();
$('.ch-logo').bind('click',function(){
$('.dropdown').toggle();
});
}else{
$('.dropdown').show();
}
}).resize();

关于javascript - 响应式 jquery 导航交互 - 调整大小问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29008690/

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