Question

我正在学习jQuery，需要有关创建下拉菜单的建议/帮助。到目前为止，我已经设置了向下滚动，链接消失，并出现一个名为“菜单”的链接。

我想知道当我点击菜单时如何让链接向下滑动..我不太清楚如何去做这个。

这是我到目前为止所拥有的

HTML

<div class="container">

    <header>
        <nav>
            <a href="#">
            <span class="menu">Menu</span>
            </a>

            <ul>
                <li>link1</li>
                <li>link2</li>
                <li>link3</li>
            </ul>
        </nav>
    </header>

    <div class="blueDiv">
    </div>

    <div class="redDiv">
    </div>

    <div class="greenDiv">
    </div>

</div>

的Javascript

$(window).scroll(function(){
    var topScroll = $(this).scrollTop();
    if (topScroll >= 3) {
        $(".menu").show();
        $("ul").hide();
    } else{
        $("span").hide();
        $("ul").show();
    }
})


$("a").click(function(){
    $("nav.ul").slideToggle();
})

我也不介意易于使用的插件列表。

Answer 1

你走在正确的轨道上，这里是JS Fiddle，它扩展了你从CodePen提供的示例。

您需要添加的是：

 $(document).scroll(function(){
    $('.navigation').hide();
 })

现在，您的脚本会在页面加载时隐藏菜单：

$(document).ready(function(){  
   $('.navigation').hide();

然后在用户点击它时将其切换为开启或关闭。

   $('.box').click(function(){  
      $('.navigation').toggle();  
      });  
  });

最后，它会在用户滚动时隐藏菜单。

 $(document).scroll(function(){
    $('.navigation').hide();
 })

如果您想稍微调整一下，可以使用slideToggle代替toggle来隐藏和显示菜单：）

需要在下拉菜单上的起点

1 个答案: