jQuery Powered Accordion 缺少锚链接功能

Question

对于今天的问题，我有一个使用 jQuery 工具库 构建的非常小的手风琴。我发现 jQuery 工具为我提供了所需的功能，而且占用空间比 800kb jQuery UI 小得多。更不用说更流畅、质量更好的动画了。

然而，我们现在开始填充该网站，我有点困惑的是我的手风琴中的链接不起作用。我使用了一个简单的 href="#' 作为我的占位符，突然间这些不会带我回到页面顶部。

HTML：

<div class="col">
            <ul id="accordion" class="footerNav">
                <li class="topLevel">
                    <a class="current" href="#">Autos</a>
                    <ul id="autos" class="pane">
                        <li><a href="#">News</a></li>
                        <li><a href="#">Reviews</a></li>
                        <li><a href="#">Car Tech</a></li>
                        <li><a href="#">Fuel Economy &amp; Safety</a></li>
                        <li><a href="#">Buying &amp; Selling</a></li>
                        <li><a href="#">Everything Else</a></li>
                    </ul>
                </li>
                <li class="topLevel">
                    <a href="#">Lifestyle</a>
                    <ul id="lifestyle" class="pane">
                        <li><a href="#">Music</a></li>
                        <li><a href="#">Food</a></li>
                        <li><a href="#">Travel</a></li>
                        <li><a href="#">Shopping</a></li>
                        <li><a href="#">Everything Else</a></li>
                    </ul>
                </li>
                <li class="topLevel">
                    <a href="#">People</a>
                    <ul id="people" class="pane">
                        <li><a href="#">Who You Know</a></li>
                        <li><a href="#">Who You Should Know</a></li>
                        <li><a href="#">Everyhone Else</a></li>
                    </ul>
                </li>
                <li class="topLevel">
                    <a href="#">Tech</a>
                    <ul id="tech" class="pane">
                        <li><a href="#">Business</a></li>
                        <li><a href="#">Pleasure</a></li>
                        <li><a href="#">Everyhting Else</a></li>
                    </ul>
                </li>
                <li class="topLevel">
                    <a href="#">Trends</a>
                    <ul id="trends" class="pane">
                        <li><a href="#">Online</a></li>
                        <li><a href="#">Offline</a></li>
                        <li><a href="#">Everyhting Else</a></li>
                    </ul>
                </li>
                <li><a href="#">Blog</a></li>
            </ul>
        </div>

CSS：

footer .col ul.footerNav li {
    color:#fff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:100;
    text-decoration:none;
    list-style: url(../../images/footer_bullet_1.png);
}
footer .col ul.footerNav li.topLevel {
    list-style: url(../../images/footer_bullet_3.png);
}
footer .col ul.footerNav li.topLevel:hover {
    cursor:pointer;
    list-style: url(../../images/footer_bullet_2.png);
}
footer .col ul.footerNav li.topLevel:active {
    list-style: url(../../images/footer_bullet_2.png);
}

footer .col ul.footerNav li a {
    display:block;
    color:#ddd;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:100;
    text-decoration:none;
    outline:none;
}
footer .col ul.footerNav li a:hover {
    text-decoration:underline;
}

JAVASCRIPT：

$(document).ready(function() {

            // Footer Accordion
            $("#accordion").tabs("#accordion ul.pane", {
                tabs: 'span', 
                effect: 'slide', 
                initialIndex: 0
            });

        });

要查看该网站的演示，您可以在这里：

http://rawdesigns.net/web2carz/

手风琴位于页脚的中心列中。

Answer 1

您在这里使用了错误的工具，

您正在使用选项卡工具执行树视图任务，您的 html 结构与库工作所需的结构完全不同。

现在，您将所有 标签视为“选项卡”，因此它们不会去任何地方，它们只是试图找到与其相关的最接近的内容，例如 显然不存在。

你只需要这段代码来制作树视图

• 演示： http://jsbin.com/obazew/3

/* CSS */ .pane { 显示：无 }

$(function() {
    $('li.topLevel a:first-child').click(function(e) {
        e.preventDefault();
        $('.pane:visible').slideUp('slow');
        $(this).next('.pane:not(:visible)').slideDown('slow');
    });
});

Answer 2

在页面顶部使用并指定您的“#top”标签。

此外，您现在可以使用元素 ID 代替命名锚点： http://www.bennadel.com/blog/822-Using-BODY-ID-As-A-Back-To-Top-Page-Anchor.htm

Answer 3

我认为它来自插件本身。查看源代码，似乎是可能的进行跨选项卡链接，这是通过以下方式完成的：

// cross tab anchor link
panes.find("a[href^=#]").bind("click.T", function(e) {
    self.click($(this).attr("href"), e);        
}); 

它在所有面板中查找以 # 开头的 href 的所有 >，它绑定了一个点击事件和处理程序调用内部“click”方法self.click，用于切换选项卡。

您的链接属于这种情况，因此被视为跨表链接。

我认为将链接更改为 不会解决问题，因为它们仍会被视为跨选项卡链接。它不会像你想要的那样工作。