jQuery Powered Accordion 缺少锚链接功能

Question

对于今天的问题，我有一个用jQuery Tools library 制作的非常小的手风琴。我发现 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

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

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

现在您将所有 </a> 标签视为“标签”，因此它们不会去任何地方，它们只会尝试找到与之相关的最接近的内容，例如 </div>，这显然是不在那里。

您只需要此代码即可创建树视图

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

/* CSS */ .pane { display:none }

$(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

我认为它来自插件本身。查看source code，似乎可以进行跨表链接，这是这样做的：

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

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

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

我不认为将您的链接更改为 <a href="#top"> 会解决问题，因为它们仍将被视为交叉表链接。它不会像这样或你想要的那样工作。