jQuery powered Accordion缺少Anchor Link功能

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

您使用此错误的工具，

你正在使用的树状视图任务的标签工具，你的HTML结构与为了工作而需要图书馆的人完全不同。

因为现在您正在将所有</a>标签视为“标签”，因此他们不会去任何地方，他们只会试图找到与其相关的最接近的内容，即显然不存在的</div>。

你只需要这个代码，以使该树视图

• 演示：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

我认为它来自插件本身。纵观source code，现在看来，这可能使交叉表连接起来，这样做是这样的：

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

它发现所有<a>在所有面板与href开始用#，它绑定click事件处理程序调用内部“单击”方法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