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');
}

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

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

此外，如果您使用.closest()而不是.parent().parent()等等，您的代码看起来会更清晰，更少。

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

一旦按下另一个按钮，如何滑动固定的div

1 个答案: