DIV dropdown (jQuery)

Question

I'm looking to create a basic DIV based dropdown menu:

<ul id="menu">
    <li>
        <a href="#">item 1</a>
        <div class="submenu">something here</div>
    </li>
    <li>
        <a href="#">item 2</a>
        <div class="submenu">something else here</div>
    </li>
    <li>
        <a href="#">item 3</a>
        <div class="submenu">something more</div>
    </li>
</ul>

jQuery:

$j('.submenu').hide()
$j("#menu li a").hover(
  function () {
    $(this).addClass('active').next('.submenu').addClass('active').slideDown('fast');
  }, 
  function () {
    $(this).addClass('active').next('.submenu').addClass('active').slideUp('fast');
  }
);

... isn't working.

You probably want a semi-colon after this: $j('.submenu').hide(); and the $j, is jquery referenced as such, or as the $ as on the $(this)? — Mark Schultheiss
– Mark Schultheiss, Commented Mar 2, 2010 at 18:04

neuroguy123 · Accepted Answer · 2010-03-02 17:59:31Z

3

"#menu ul li a"

references nothing. menu is a ul

answered Mar 2, 2010 at 17:59

neuroguy123

1,34511 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

eozzy Over a year ago

Oh sorry about that, nesting is not the problem in my case, I've verified it.

neuroguy123 Over a year ago

I just ran a simple test after removing ul and it worked. I also changed $j to just $, but I'm not sure if you are using some kind of alias there. I also added a semicolon after hide() and changed the quotes to double quotes in ".submenu"

Nick Craver · Accepted Answer · 2010-03-02 18:00:24Z

0

ul is not beneath #menu, it is #menu, try this:

$j(document).ready(function(){
  $j('.submenu').hide();
  $j("#menu li a").hover(
    function () {
      $(this).addClass('active').next('.submenu').addClass('active').slideDown('fast');
    }, 
    function () {
      $(this).removeClass('active').next('.submenu').removeClass('active').slideUp('fast');
    }
  );
});

answered Mar 2, 2010 at 18:00

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Collectives™ on Stack Overflow

DIV dropdown (jQuery)

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related