Jquery切换菜单和Jquery显示和隐藏翻转

Question

我正在进行导航，并且与Jquery有一些问题。

1）当悬停在菜单右侧的图像上时，只有悬停在右侧图像上时才需要显示下拉菜单。

2）当你使屏幕小于800px时，它会显示一个下拉菜单。我希望使用红色按钮

顺畅地上下切换菜单

任何人都可以提供帮助吗？

http://jsfiddle.net/558pA/1/

/*  MAIN MENU DROPDOWN
===================================*/
$(".toggle-nav").click(function () {
    $("#nav").slideToggle('slow');
});

/*  MAIN SETTINGS SHOW AND HIDE
===================================*/

('.user-profile').hover(

function () {
    $(this).show();
},

function () {
    $(this).hide();
});

Answer 1

将$(".toggle-nav")更改为$("#toggle-nav")，并向href添加#：

<a href="#" id="toggle-nav">Toggle navigation</a>

...

$("#toggle-nav").click(function () {
    $("#nav").slideToggle('slow');
});

Woking演示：http://jsfiddle.net/n8zqS/