JS SlideToggle汉堡包在第二次点击时没有返回图标

Question

我正在使用此CodePen（https://codepen.io/g13nn/pen/eHGEF）的一个分支，它使用以下JS来隐藏/显示菜单和图标，具体取决于点击状态：

$( document ).ready(function() {

$( ".cross" ).hide();
$( ".menu" ).hide();
$( ".hamburger" ).click(function() {
$( ".menu" ).slideToggle( "slow", function() {
$( ".hamburger" ).hide();
$( ".cross" ).show();
});
});

$( ".cross" ).click(function() {
$( ".menu" ).slideToggle( "slow", function() {
$( ".cross" ).hide();
$( ".hamburger" ).show();
});
});

});

我试图通过使整个条形图激活菜单而不仅仅是图标本身来调整此功能。分叉的CodePen位于：https://codepen.io/websmyth/pen/XYXXmW

使用这个JS：

$( document ).ready(function() {

$( ".cross" ).hide();
$( ".menu" ).hide();
$( "header" ).click(function() {
$( ".menu" ).slideToggle( "slow", function() {
$( ".hamburger" ).hide();
$( ".cross" ).show();
});
});

$( ".cross" ).click(function() {
$( ".menu" ).slideToggle( "slow", function() {
$( ".cross" ).hide();
$( ".hamburger" ).show();
});
});

});

这成功激活/停用菜单并更改用户初次点击的图标，但第二次点击不会将图标返回到汉堡包（从关闭按钮）。有什么想法吗？