如何解决jQuery悬停找不到父跨度
| 我确定已经解决了这个问题,但是有很多jquery父问题,因此筛选它们是一项艰巨的任务。 我有一个页面,其中的菜单下拉列表如下所示: <ul class=\"topnav\">
<span><li><a href=\"firstitem.php\">Contact</a>
<ul class=\"subnav\">
<li><a href=\"contact.php\">Contact Us</a></li>
<li><a href=\"testlink.php\">Test Link</a></li>
</ul>
</li></span>
<span><li><a href=\"seconditem.php\">Ministries</a>
<ul class=\"subnav\">
<li><a href=\"#\">link 1</a></li>
<li><a href=\"#\">link 2</a></li>
<li><a href=\"#\">Link 3</a></li>
<li><a href=\"#\">Link 4</a></li>
<li><a href=\"#\">Link 5</a></li>
<li><a href=\"#\">Link 6</a></li>
</ul>
</li></span>
</ul>
目前,我的jQuery引用这样的:
$(document).ready(function(){
$(\"ul.topnav li a\") .mouseover(function() { //When trigger is clicked...
//Drop down the subnav on click
$(this).parent().find(\"ul.subnav\").slideDown(\'fast\');
$(this).parent().parent(\"span\").hover(function() {
//do nothing since we are already hovering over this span and menu should be dropped
},function(){
//if we leave the span,slideUp the menu
$(this).parent().find(\"ul.subnav\").slideUp(\'medium\');
});
});
});
下拉菜单有效,但是我找不到要查找的跨度,因此当前它从未滑过。任何帮助,将不胜感激。谢谢
另外,我想这样做而不添加单个标签ID。是的,这样会更容易,但是我从别人那里得到了这段代码,我希望保持相似。
解决方法
这里有一些问题。
不要将ѭ2放在ѭ3中。它违反了html验证规则,并可能导致问题。
向上滑动不起作用的原因是它在一个新功能中,这意味着
this
的范围已更改。
码
$(document).ready(function(){
$(\"ul.topnav li a\") .mouseover(function() { //When trigger is clicked...
//Drop down the subnav on click
var $ul = $(this).parent().find(\"ul.subnav\");
$ul.slideDown(\'fast\');
$(this).parent().parent(\"span\").hover(function() {
//do nothing since we are already hovering over this span and menu should be dropped
},function(){
//if we leave the span,slideUp the menu
$ul.slideUp(\'medium\');
});
});
});
这应该对您更好。
, 使用父母(选择器),而不是父母()。
, 在这种情况下,$(this..parent()是li元素,$(this).parent()。parenT()是ul class = \“ subnav \”元素,$(this).parent()。parent ().parent()是span标签。
, 该代码有效,但页面加载除外(意味着一旦将鼠标悬停在它上面,它就会开始工作)。您应该能够:
$(document).ready(function(){
$(\"ul.topnav li a\") .mouseover(function() { //When trigger is clicked...
//Drop down the subnav on click
$(this).parent().find(\"ul.subnav\").slideDown(\'fast\');
$(this).parent().parent(\"span\").hover(function() {
//do nothing since we are already hovering over this span and menu should be dropped
},slideUp the menu
$(this).parent().find(\"ul.subnav\").slideUp(\'medium\');
});
});
$(\"ul.subnav\").slideUp(\'medium\'); // <-- Note here,but you probably want to hide or something
});
http://jsfiddle.net/SvDAw/
注意,这是在FF4中。
注意
我没有对UL内SPAN的不正确使用发表评论;正如其他说明所述,这可能不是一件好事,因为它是无效的(您应该在UL / OL中使用LI \和OL / UL \)。因此,您可以考虑对标记重新排序,以在每个级别的LI上使用类,或者在您的父UL中嵌入一些UL(我喜欢第一个更好的)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。