jQuery slideToggle没有触发

Question

So I am trying to create a dropdown menu with jquery and have a div (the dropdown) with display: none. I am trying to fire the jquery toggle when an li item in the above nav bar is clicked. If anyone could take a look at this code and see if there are any obvious errors, that would be great.

Thanks

PS The php code is present as I am working with WP

<ul class="right-nav">
    <li style="padding-left: 10px; cursor: pointer;" id="current-user">
    <?php $current_user = wp_get_current_user(); echo $current_user->user_login; ?>
    </li>
</ul>

The dropdown menu:

<div class="dropdown-wrapper">
    <div id="user-menu" class="user-menu">
       <ul>
           <li>Hello</li>
        </ul>
    </div>

.user-menu {
    display: none;
}

And then the jQuery event itself:

$(document).ready(function() {
        $('#current-user').click(function() {
                $('#user-menu').slideToggle("fast");
        });
    });

Answer 1

Man... I guess I kinda got it. Remove the CSS:

.user-menu {
    display: none;
}

And instead, in teh document's ready, give this:

$(".user-menu").hide();

Trust me, this makes a difference. The reason is, the jQuery first checks if the style="display: none;" is there or not in the element, as it is not there, because it is given by the CSS, it gives another display: none inline style. This doesn't make any difference. But third time click will reveal it. Give it a try.