使用类名</li>在<li>上调用jQuery

时间:2012-10-13 03:46:52

标签: javascript jquery html html-lists

我正试图在这个元素上调用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();
  });
});

感谢您的帮助!

5 个答案:

答案 0 :(得分:2)

您的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/

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

DEMO:http://jsfiddle.net/CU83B/

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

Working Demo

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