jQuery mouseover and toggle problem

I am trying to have a link appear on mouseover and when clicked, have the link toggle a div (show/hide). What I have now is below.

PHP:

<li class="test">    <div class="link" style="display:none">
                <span class="toggle"><a href="#">link</a></span>
                                    </div>
    <div class="togglediv"><p>lorem ipsum</p></div>
</li>

JQUERY:

    <script language="javascript">
    jQuery(document).ready(function($){
                  $('.test').bind('mouseenter mouseleave', function(e){

                      var fade_type = e.type == 'mouseenter' ? 'fadeIn' : 'fadeOut';
                      $(this).find('.link')[fade_type]();

                  }).find('.toggle a').click(function($){
$(".togglediv").hide();
      $(this).toggleClass("active").next().slideToggle("slow");
    return false;
    });
    });
    </script>

The mouseover works, but the toggle doesen't. When I click the link, nothing happens. What giv开发者_StackOverflow中文版es?

demo here

http://jsfiddle.net/JE8Bz/

1) as the problem T.J. Crowder mentioned

2) you put a $ in the param of click() function

Your link has no next sibling (it's the only thing inside the span, which is the only thing in the div), so calling next on it will return an empty set. Perhaps use closest to go up to the containing div, then next to go over:

$(this).toggleClass("active").closest('div').next().slideToggle("slow");

Here is an example: http://jsfiddle.net/mazzzzz/MeAnJ/9/

Update the Fiddle