jquery-在隐藏导航菜单上设置高度动画

因此，我正在构建一个响应迅速的导航菜单，它“固定”在顶部，是“引导”式的，带有一个东西栏和一个按钮，当你点击它时，它会显示导航

HTML 它所做的是将“隐藏导航”下方的栏的位置更改为相对位置，这样，如果用户在单击它后滚动，然后在其上方“显示”隐藏导航，则不会在页面周围浮动

但问题是，它并没有那么流畅，第一，它把它们跳到页面顶部，第二，它没有动画，太突然了

有点想不出如何设置函数的动画

有人帮忙吗？

之所以出现“跳转到顶部”行为，是因为您正在将单击事件绑定到带有空标记“#”的“a”锚定标记。这没有错，但是你必须告诉浏览器在点击链接后不要滚动到顶部。您可以在click事件中返回false，或者调用e.preventDefault（）（不要忘记向回调函数添加“e”参数）

对于动画，可以使用slideDown或fade jquery动画方法

另外，您不必对具有相同事件的同一元素进行两个绑定，您只需要有一个绑定（它是相同的，但更干净）

例如：

$(document).ready(function(){ 
    $(".shownavbutton").click(function(e) {
        e.preventDefault(); 
        $(".hiddennav").toggleClass("displaynone").toggleClass("displayblock");
        $(".fixednav").toggleClass("fixed").toggleClass("relative");
        $(".hiddennav").hide().slideDown("normal", "linear");
    });
});

---

你能试着把它放到一个文件夹里吗？将使我们能够看到CSS并了解您真正想要的内容。您可能需要使用

$（）.animate（{'property'：value}）

我刚刚删除了更改类的东西并使用了$（document.ready（function（）{$（“.shownavbutton”）。单击（function（e）{.e.preventDefault（）；$（.hiddennav”）.hide（）.slideToggle（“normal”，“linear”）；}）；问题是，它不会“切换”，它只是向下滑动，然后如果按下按钮将其隐藏，则再次设置向下滑动的动画。好的，然后删除hide（）方法调用。只需确保元素首先使用css规则（display=“none”）隐藏即可。然后，当您调用slideToggle时，它将添加一个display=“block”内联属性，该属性将覆盖“none”css规则。再次单击时，由于图元可见，它将向上滑动$（document）.ready（function（）{$（“.shownavbutton”）。单击（function（e）{e.preventDefault（）；$（“.hiddennav”）。滑动切换（“正常”、“线性”）；}）；

$(document).ready(function(){ 
    $(".shownavbutton").click(function() { 
        $(".hiddennav").toggleClass("displaynone").toggleClass("displayblock");
    });
});

 $(document).ready(function(){ 
    $(".shownavbutton").click(function() { 
        $(".fixednav").toggleClass("fixed").toggleClass("relative");
    });
});

$(document).ready(function(){ 
    $(".shownavbutton").click(function(e) {
        e.preventDefault(); 
        $(".hiddennav").toggleClass("displaynone").toggleClass("displayblock");
        $(".fixednav").toggleClass("fixed").toggleClass("relative");
        $(".hiddennav").hide().slideDown("normal", "linear");
    });
});