Question

我找到了一个关于制作简单手风琴的css技巧的教程。

http://css-tricks.com/snippets/jquery/simple-jquery-accordion/

我注意到这不是真的基于导航，但我可以看到它是如何工作的，所以我做了一些简单的调整，使其适用于无序列表导航菜单。但当时，即使我让动画运行甜蜜，我也没有意识到这会破坏实际的锚点击事件。

var allPanels = $('.sub-menu').hide();

$('li.menu-item a').click(function() {
    allPanels.slideUp();
    $(this).parent().find('ul').slideDown();
    return false;
});

请参阅我创建的jsfiddle来证明问题。

http://jsfiddle.net/Yj4px/2/

正如您所看到的，所有链接都已死亡，只需激活脚本。

我非常感谢任何指针，因为我正在努力解决这个问题。我真的想不惜一切代价避免使用jquery插件。提前谢谢。

猜测，脚本只需运行li.menu-item包含ul - 我无法添加类，因为菜单将由cms动态生成，并且可能随时更改。所以脚本需要自己运行。

Answer 1

从您的功能中删除return false;，它会很有效。

Answer 2

仅当return false标记不是直接链接或浏览器仍希望返回页面顶部时，您才需<a>

将具有面板的手风琴标题的href更改为“＃”。重定向链接将正常使用以下“IF”，手风琴将正常工作

$('li.menu-item a').click(function() {
    if($(this).attr('href')=="#"){
        allPanels.slideUp();
        $(this).parent().find('ul').slideDown();
        return false;
    }
});

在您的服务器代码中添加一个类“active”以在需要打开的面板中链接（将href与url匹配）在页面加载

$('a.active').closest('ul').slideDown()

jQuery手风琴菜单脚本破坏锚标记事件

2 个答案: