javascript - 使用类名在 上调用 jQuery

Question

我正在尝试在此元素上调用 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>

当鼠标悬停在“服务”上时，我希望显示 ul 类“菜单”，当我离开 <li> 时，我希望显示 ul 类“菜单”。 ，它应该会再次消失。我一直在尝试，现在开始变得绝望......网址是:http://wittmerperformance.com/site/

到目前为止我的脚本看起来像这样:

$(function() {
  var fade = $('.menu');
  $('.expanded nolink').hover(function(){
  alert("hello world!");
fade.fadeIn();
  }, function() {
fade.fadeOut();
  });
});

感谢您的帮助!

Answer 1

您的 jQuery 代码中有错误，选择器错误:

将 $('.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>

纯 CSS 解决方案

​ul li.expanded ul {display: none;}
ul li.expanded:hover ul {display: block;}​

fiddle :http://jsfiddle.net/nhhQz/

jQuery 解决方案

$(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);
    });
});​

fiddle :http://jsfiddle.net/nhhQz/1/