Question

我正在尝试找到与http://codeigniter.com/user_guide/顶部的'目录'相似的内容，但是对于jQuery。看起来该站点使用moo工具fx库。有没有人知道一个已经存在的jQuery插件做同样的事情或简单的javascript代码来完成该菜单的相同滑动效果？

Answer 1

核心就在那里; http://api.jquery.com/slideDown/。只需在链接的onclick事件中调用该函数，你就应该好了。

$('a.expand').click(function() {
  $('#toc').slideToggle(); // slide up if down, down if up.
});

Answer 2

要实现这种确切的效果，您只需使用jQuery中内置的slideToggle()函数。

$('#toggleButton').click(function(){
    $('#tableOfContents').slideToggle();
});

您需要将目录包装在内，并有一个链接/按钮/任何宽度id =“toggleButton”来激活它。确保按钮位于目录之外！

Answer 3

您可以查看此链接 -

http://www.webresourcesdepot.com/sliding-top-menu-with-jquery/

http://net.tutsplus.com/tutorials/javascript-ajax/build-a-top-panel-with-jquery/

你甚至可以谷歌了解更多信息。有许多可用。

Answer 4

您可以使用jQuery .slideDown（）和.slideUp方法。

http://api.jquery.com/slideDown/

然而，你可能希望在幻灯片上使用带有回调函数的ajax动态调用该菜单。

编辑：我建议使用AJAX在菜单中调用的原因是因为可用性/可访问性问题导致屏幕上有大约100个链接，键盘用户仍然可以通过这些链接。键盘用户需要花费很长时间来浏览所有屏幕外链接，最终进入“目录”链接，激活菜单，然后将标签切换回他/她想要的标签......太糟糕了。该菜单已经无法使用JS关闭。（下面是目录页面的链接）。因此，使用AJAX调用菜单并给出菜单focus（）的第一个链接是一个更好的解决方案。

Answer 5

是的，这是moxools Fx.Slide。在jQuery中，您应该使用slideDown（http://api.jquery.com/slideDown/）

Javascript滑下菜单

5 个答案: