按下另一个按钮后如何向下滑动固定的div

Question

我要做什么

用辅助按钮关闭div，并模仿第一个按钮的slideDown脚本。

问题

按下页脚按钮后，通过向上拖动页眉将显示我的隐藏div （#footerPanel） 。 再次单击页脚后，它将关闭面板并将页眉滑回原位。

菜单按钮将按以下方式工作，将鼠标悬停在按钮上后，将显示站点导航（JSFiddle中不包括）。 通过此操作，我希望能够关闭#footerPanel并使页眉向下滑动，从而模仿页脚按钮的关闭功能。

现在发生的是，当我单击菜单时，＃footerPanel向下滑动，但标题停留在div推入的位置。 同样，当您移动鼠标时，div也会向上滑动。

我该如何解决这个问题？ 我尝试了一些解决方案，但它们似乎都具有相同的结果。

的js

$('#more').toggle(function(){
    //show its submenu
$('#footerPanel').slideDown(500);
$(this).parent().parent().animate({'bottom': "+=400"}, 500);
    }, 
function () {
    //hide its submenu
$('#footerPanel').slideUp(500);     
$(this).parent().parent().animate({'bottom': "-=400"}, 500);            
    });
$(document).ready(function(){
$('#menu').hover(function(){
$("#footerPanel").slideToggle();
    });
});

的jsfiddle

Answer 1

更新的小提琴： http : //jsfiddle.net/9s33F/5/

我想我有您要的东西。 我添加了以下内容作为打开菜单时animate功能完成时的回调。

function () {
    $(this).addClass('open');
}

然后在菜单的单击处理程序中，添加以下if语句：

if ($(this).closest('header').is('.open')) {
    $('header').animate({'bottom': "-=400"});
}

另外，如果您使用.closest()而不是.parent().parent()等，则代码看起来会更干净，代码也会更少。

jQuery.closest： http : //api.jquery.com/closest/