gpt4 book ai didi

javascript - addClass 转换不起作用

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

这似乎是一个常见问题,但到目前为止我找到的答案都没有用一切看起来都是非常标准和直接的代码,但无法使该死的东西工作。制作下拉菜单,我需要一个隐藏的 ul 在悬停时缓慢出现。

它的HTML

<div class="main-nav">
<ul>
<li>
<a href="wtvr">Title</a>
<ul class="dropedmainnav t50 ">
<li class="subnavli" style="position:relative;">
<div class="superimage" style="position:absolute; right:-100%;">
<img src="" alt="{{link.handle}}">
</div>
</li>
<li class="t50 subnavli">
<a href="wtvr">Subnav link</a>
</li>
<div class="subnavsides"></div>
</ul>
</li>
</ul>
</div>

它的js

$(".main-nav ul li").each(function(){
$(this).mouseover(function(){$(this).find("ul").addClass("dropedunderul");});
$(this).mouseleave(function(){$(this).find("ul").removeClass("dropedunderul"); });
$(this).find("ul").mouseover(function(){$(this).addClass("dropedunderul");});
$(this).find("ul").mouseleave(function(){$(this).removeClass("dropedunderul");});

});

和CSS

.t50 {-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
.dropedmainnav {display:none; padding:15px 0 10px 0; overflow:hidden;width:500px; }
.dropedunderul {display:table !important; min-height:150px; border-top:2px solid transparent; z-index:2; }
.main-nav ul li {position:relative;}
.main-nav ul li ul {position:absolute;background-color:rgba(255,255,255,0); overflow:visible;}
.main-nav ul li ul li {float:none !important; text-align:left !important;}

我认为相关样式就是这样。我还尝试过专门为 .dropedmainnav、.dropedunderul 添加过渡,并且我尝试过使用内联样式。

最佳答案

我不确定你在用 $.each() 做什么,在每个鼠标进入/离开事件上调用一个函数并让它淡入/淡出不是更简单吗:

$(".main-nav ul li").mouseenter(function() {
$(this).children('dropedmainnav').fadeIn(500);
}
}).mouseleave(function() {
$(this).children('dropedmainnav').fadeOut(500);
}
});

关于javascript - addClass 转换不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28597586/

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