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