我正试图在这个元素上调用jQuery:
<li class="expanded nolink">
<span>SERVICES</span>
<ul class="menu">
<li class="first leaf">
<a href="/site/personal_training">PERSONAL TRAINING</a>
</li>
</ul>
</li>
当鼠标悬停在SERVICES上时,我希望显示ul class“menu”,当我离开<li>
时,它会再次消失。我一直在努力,我开始变得绝望......
网址为:http://wittmerperformance.com/site/
到目前为止,我的脚本看起来像这样:
$(function() {
var fade = $('.menu');
$('.expanded nolink').hover(function(){
alert("hello world!");
fade.fadeIn();
}, function() {
fade.fadeOut();
});
});
感谢您的帮助!
答案 0 :(得分:2)
将$('.expanded nolink')
更改为$('.expanded.nolink')
,因为选择器未选择任何内容,您的代码可能无效!
您有以下代码:
<ul>
<li class="expanded nolink">
<span>SERVICES</span>
<ul class="menu">
<li class="first leaf">
<a href="/site/personal_training">PERSONAL TRAINING</a>
</li>
<li class="leaf">
<a href="/site/personal_training">PERSONAL TRAINING</a>
</li>
<li class="leaf">
<a href="/site/personal_training">PERSONAL TRAINING</a>
</li>
</ul>
</li>
</ul>
ul li.expanded ul {display: none;}
ul li.expanded:hover ul {display: block;}
$(document).ready(function(){
$("ul li.expanded ul").hide();
$("ul li.expanded").hover(function(){
$(this).children("ul").stop().fadeIn(400);
}, function(){
$(this).children("ul").stop().fadeOut(400);
});
});
答案 1 :(得分:1)
你的选择器错了,你应该改变:
$('.expanded nolink')
为:
$('.expanded.nolink')
您还可以使用fadeToggle
方法:
$(function(){
$('.menu').hide();
$('li.expanded').hover(function(){
$('.menu', this).fadeToggle()
})
})
答案 2 :(得分:1)
您基本上可以使用hover
:
$(document).ready(function(){
$("ul li.expanded").hover(function(){
$(this).children("ul").show();
}, function(){
$(this).children("ul").hide();
});
});
答案 3 :(得分:1)
<li class="expanded nolink">
<span >SERVICES</span>
<ul class="menu">
<li class="first leaf">
<a href="/site/personal_training">PERSONAL TRAINING</a>
</li>
</ul>
</li>
$(function() {
var fade = $('.menu');
$('.expanded').hover(function(){
fade.fadeIn();
}, function() {
fade.fadeOut();
});
});
<强> DEMO 2 强>
答案 4 :(得分:0)
我建议首先为该LI提供一个ID,与该类调用有点松散耦合
<li id="my-id" class="expanded nolink"><span>SERVICES</span><ul class="menu"><li class="first leaf"><a href="/site/personal_training">PERSONAL TRAINING</a></li>
$("#my-id").hover(
function(){
//Show the span
},
function(){
//Hide the span
}
);