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;
}

THE 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>代码视为“标签”，因此它们不会去任何地方，他们只会尝试找到与其相关的最近内容{is {a} {{1}那显然不存在。

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

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

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

</div>

Answer 2

我认为它来自插件本身。看看source code，似乎可以进行交叉表链接，这是通过这种方式完成的：

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

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

您的链接属于此方案，因此被视为交叉表链接。

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

Answer 3

使用并在页面顶部指定“＃top”标记。

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

jQuery Powered Accordion缺少锚链接功能

3 个答案: