CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-lists
stdcerr
stdcerr

Reputation: 15598

call jQuery on <li> using class name

I'm trying to call a jQuery on this element:

<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>

when hovering over SERVICES, I want ul class "menu" to show up and when i leave the <li>, it should disappear again. I've been trying around an am starting to get all desperate... the url is: http://wittmerperformance.com/site/

The script I have so far looks something like this:

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

Thanks for help!

Upvotes: 0

Views: 2003

Answers (5)

Eli
Eli

Reputation: 14827

You can basically using hover:

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

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

Upvotes: 1

Sibu
Sibu

Reputation: 4617

<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

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

There is an error in your jQuery code, the selector is wrong:

Change $('.expanded nolink') to $('.expanded.nolink'), as the selector is not selecting anything, your code might not work!

You have this code:

<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>

Pure CSS Solution

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

Fiddle: http://jsfiddle.net/nhhQz/

jQuery Solution

$(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/

Upvotes: 2

Ram
Ram

Reputation: 144659

Your selector is wrong, you should change:

$('.expanded nolink')

to:

$('.expanded.nolink')

You can also use fadeToggle method:

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

Upvotes: 1

madhairsilence
madhairsilence

Reputation: 3870

I would recommend to give an ID for that LI first, calling with the class is a bit loosely coupled

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

Upvotes: 0

Related Questions