CODEWITHSUNDEEP
jqueryhtmlcss
Rob
Rob

Reputation: 1255

jQuery Show hide li and ul

I have the follwing HTML

 <ul class="shopp_categories">
    <li class="current">
      <a class="current" href="link">Gifts For Her</a>
      <ul class="children active" style="display: none;">
        <li><a>Hand Bag Holders</a></li>
      </ul>
    </li>

    <li><a href="link">Gifts ForHim</a></li>
    <li><a href="link">Innovative Gifts</a></li>
    <li><a href="link">Jewellery</a>   
      <ul class="children" style="display: none;">
        <li><a>Alrun Runes</a></li>
      </ul>
    </li>
  </ul>

and the following jQuery

jQuery(document).ready(function() {
    $('ul ul').hide();
    $('ul.children active').show(); 
    $('ul.children li a').removeAttr("href");
    $('ul.children li > a').mouseover(function(event) {
        $('ul ul').hide('slow');
        $(this).parent().find('ul').toggle('slow');
    });
});

I can get the child UL's to hide but I cant get them to show on mouse over or stay open if they are active

Upvotes: 0

Views: 5345

Answers (1)

maxedison
maxedison

Reputation: 17553

To prevent them from hiding when active, you simply need an if statement, something like:

if(!$(this).hasClass('active')){ //if it doesn't have the class active
    $(this).hide();
}

Regarding the first problem you mention, when you hide an element it gets the style display:none. At that point, no mouse events can fire on the element. You can't click it, mouse over it, mouse off it, etc because it is removed from the rendered document.

And FYI, you have an error in your syntax: $('ul.children active') should be $('ul.children.active').

Upvotes: 3

Related Questions