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>，它应该再次消失。我一直在尝试，我开始变得绝望……网址是：http ://wittmerperformance.com/site/

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

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

感谢帮助！

score 2 · Accepted Answer

您的 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;}

小提琴：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);
    });
});

小提琴：http: //jsfiddle.net/nhhQz/1/

score 1 · Accepted Answer

您基本上可以使用hover：

$(document).ready(function(){
    $("ul li.expanded").hover(function(){
        $(this).children("ul").show();
    }, function(){
        $(this).children("ul").hide();
    });
});

演示： http: //jsfiddle.net/CU83B/ </p>

score 1 · Accepted Answer

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

工作演示

演示 2

score 1 · Accepted Answer

您的选择器错误，您应该更改：

$('.expanded nolink')

至：

$('.expanded.nolink')

您还可以使用fadeToggle方法：

$(function(){
   $('.menu').hide();
   $('li.expanded').hover(function(){
      $('.menu', this).fadeToggle()
   })
})

score 0 · Accepted Answer

我建议首先为该 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
    }
    );

javascript - 调用 jQuery使用类名

5 回答 5