Question

Due to constraints beyond the scope of this post, I need to modify some functioning jQuery to work based on the class of a list element rather than the class of an anchor tag.

Here is the current code:

<script type="text/javascript">
$(function() {
    $('#sub-nav > ul > li')
        .children('a.drop').mouseenter(function() {
            $(this).siblings('ul').toggle("slow");
            return false;
        }).end()
        .children('ul').hide();
}); 
</script>

and it worked great on this html:

<div id="subContent">
<ul>
<li><a href="nikon.html">Nikon</a></li>

<li class="cameras"><a href="#" class="drop">Cameras</a>
<ul>
<li><a href="nikon-d3x.html">Nikon D3x</a></li>
<li><a href="nikon-d3s.html">Nikon D3s</a></li>
<li><a href="nikon-d700.html">Nikon D700</a></li>
<li><a href="nikon-d300s.html">Nikon D300s</a></li>      
</ul>
</li>

<li class="lenses"><a href="#" class="drop">Lenses</a>
<ul>
<li><a href="24-70.html">Nikkor 24-70 f2.8</a></li>
<li><a href="80-200.aspx">Nikkor 80-200 f2.8</a></li> 
<li><a href="300.html">Nikkor 300 f2.8</a></li>
<li><a href="50.html">Nikkor 50 f1.4</a></li>
</ul>
</li>

<li class="bags"><a href="#" class="drop">Bags</a>
<ul>
<li><a  href="bag1.html">Small Bag</a></li>
<li><a href="bag2.html">Medium Bag</a></li>
<li><a href="bag3.html">Large Ba</a></li>
</ul>
</li> 
<li><a href="#" class="drop">Memory Cards</a></li>
</ul>
</div>

However, I need to change the parent list element, moving the class=”drop” from the <a> to the <li>:

Original: <li class="cameras"><a href="#" class="drop">Cameras</a>

New: <li class="cameras drop"><a href="#">Cameras</a>

How would I modify the jQuery to accommodate this change? Is it possible?

Thanks!

Answer 1

this fiddle works the same as your provided code with the modification.