javascript - 如何使用 Jquery 或 Javascript 实现展开和关闭 - 滑动菜单？

Question

我的页面中有一个左侧导航菜单。

我需要使用类似的东西，导航窗口将在页面加载时默认关闭。

如果用户想要查看导航菜单，他/她需要单击导航菜单上方的小图标，例如:“>>”，如果想要关闭它，则单击“<<”

我需要在 Jquery 中使用哪个控件来实现此目的。

谢谢

Answer 1

您可以使用 hide() 隐藏 jQuery 中的任何内容。

例如，如果您的菜单子(monad)项具有类 .children，您可以在脚本的开头调用它:

$(".children").hide();

当你有这样的菜单时:

<div class="menu">
  <div class="parent">Foo 1</div>
    <div class="children">Bar 1</div>
    <div class="children">Bar 2</div>
    <div class="children">Bar 3</div>
  <div class="parent">Foo 2</div>  
    <div class="children">Baz 1</div>
</div>

假设您有一个 >> 按钮，其 ID 为 #expand。为了"slide" the children down (使它们可见)你可以这样做:

$("#expand").click(function(){
  $(".children").slideDown();
});

sliding them up 也是如此。让它们再次隐形:

$("#collapse").click(function(){
  $(".children").slideUp();
});