页眉导航幻灯片

Question

你好，我正在做一个标题，看起来像这样:
带有徽标和箭头向下指示导航的标题栏。如果你把鼠标悬停在页眉上，导航栏就会向下滑动，你会看到大的列，现在我要做的是，如果你点击一个列，更具体的链接就会向下滑动。

我已经设法让子栏在相同的css顶部值作为列链接的下滑看起来平滑，但现在我不知道如何添加toggle值。

这是javascript，请告诉我哪里出错了

var top = ($('#serviceslink').top()+toggle);
var toggle = 0;
$('#serviceslinkextended').css({'top':top+'px'});
$('#serviceslink').click(function(){
    if (toggle == 0) {toggle = 30}
    else {toggle = 0}
});

edit: if (toggle == 0)

edit3:这样更好吗?

var top = $('#serviceslink').top();
var toggle = 0;
$('#serviceslinkextended').css({'top':top+toggle+'px'});
$('#serviceslink').click(function(){
    if (toggle == 0) {toggle = 30}
    else {toggle = 0}
});

标:我意识到子列只保持在相同的高度，因为没有定义顶部值，但这似乎并不适用于每个浏览器。我现在用的是slideToggle，但它不一样，我想知道它是如何工作的

Answer 1

试试这个函数:

$(selector).slideUp()
$(selector).slideDown()