Question

I have this menu structure

<div id="menu-s">
<ul>
<li>
<a href="#">About Us</a>
    <ul class="sub-menu">
       <li>
          <a>
       </li>
     </ul>
</li>

I use this js:

  <script>
        $(document).ready(function () {
  $('#menu-s > li > a').click(function(){
    if ($(this).attr('class') != 'active'){
      $('#menu-s li ul').slideUp();
      $(this).next().slideToggle();
      $('#menu-s li a').removeClass('active');
      $(this).addClass('active');
    }
  });
});
</script>

i just want to make the sub ul visible when the parent li is called..
Please help me with this..
Thanks

Answer 1

You haven’t got an ending tag for the first <ul>. Also, your selector is invalid. It should be $('#menu-s > ul > li > a')

@edit
Also the code $(this).attr('class') != 'active' is invalid because it’s always true (I think). You should use something like if(!$(this).hasClass('active'))

@edit2
That’s because in your if you only handle the situation when the hasn’t the class ‘active’, but when it does, you’ve got no code to handle that. Add an else statement that will fix this.