0

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

HTML

<nav class="hiddennav displaynone">
    <ul>
        <?php wp_nav_menu(array('menu' => 'Main Nav menu')); ?>
   </ul>
</nav> <!-- end div hiddennav -->   
<div class="fixednav fixed">
    <div class="smalllogo">
        <h1 class="smaller"><a class="whitelink" href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
    </div> <!-- end div smalllogo -->
    <div class="shownav">
        <a href="#" class="shownavbutton"></a>
    </div> <!-- end div shownav --> 
</div> <!-- end div fixednav -->

Javascript：

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

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

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

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

有点难以理解如何为函数设置动画。

有人帮忙吗？

4

1 回答 1

0

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

对于动画，您可以使用 slideDown 或淡入淡出 jquery 动画方法。

此外，您不必使用相同的事件对同一个元素进行 2 个绑定，您可以只拥有一个绑定（它是相同的，但更清晰）。

例子：

$(document).ready(function(){ 
    $(".shownavbutton").click(function(e) {
        e.preventDefault(); 
        $(".hiddennav").toggleClass("displaynone").toggleClass("displayblock");
        $(".fixednav").toggleClass("fixed").toggleClass("relative");
        $(".hiddennav").hide().slideDown("normal", "linear");
    });
});
于 2012-10-24T12:06:25.103 回答