2012-05-17 86 views
0

Coolio,我正在創建一個簡單的樹,作爲文檔歸檔。我正在使用切換打開幾個月來顯示裏面寫的內容。支撐自己的代碼它不漂亮,但我不能使用樹插件,因爲我必須適應它到一個jQuery 1.3.2。但如果你有寫代碼的一個更好的辦法,我洗耳恭聽藏漢:djQuery切換隨機刷新屏幕

這裏是我的html:

div id="side_archive"> 
    <h4>Archives</h4> 
    <ul> 
    <li><a id="may12" href="#">May</a></li> 
    <ul class="child" id="may"> 
     <li>Article 1</li> 
     <li>Article 2</li> 
     <li>Article 3</li> 
    </ul> 
    <li><a id="june12" href="#">June</a></li> 
    <ul class="child" id="jun"> 
     <li>Article 4</li> 
     <li>Article 5</li> 
     <li>Article 6</li> 
    </ul> 
    <li><a id="july12" href="#">July</a></li> 
    <li><a id="august12" href="#">August</a></li> 
    <ul class="child" id="aug"> 
     <li>Article 7</li> 
     <li>Article 8</li> 
     <li>Article 9</li> 
    </ul> 
    <li><a id="september12" href="#">September</a></li> 
    <ul class="child" id="sep"> 
     <li>Article 10</li> 
     <li>Article 11</li> 
     <li>Article 12</li> 
    </ul> 
    <li><a id="october12" href="#">October</a></li> 
    <ul class="child" id="oct"> 
     <li>Article 13</li> 
     <li>Article 14</li> 
     <li>Article 15</li> 
    </ul> 
    <li><a id="november12" href="#">November</a></li> 
    <ul class="child" id="nov"> 
     <li>Article 16</li> 
     <li>Article 17</li> 
     <li>Article 18</li> 
    </ul> 
    <li><a id="december12" href="#">December</a></li> 
    </ul> 
</div> 

和JavaScript:

$(document).ready(function() { 
// basic tree function 
$('.child').hide(); 

$('#january12').click(function() { $('#jan').toggle("slow")}); 
$('#february12').click(function() { $('#feb').toggle("slow")}); 
$('#march12').click(function() { $('#mar').toggle("slow")}); 
$('#april12').click(function() { $('#apr').toggle("slow")}); 
$('#may12').click(function() { $('#may').toggle("slow") }); 
$('#june12').click(function() { $('#jun').toggle("slow")}); 
$('#july12').click(function() { $('#jul').toggle("slow")}); 
$('#august12').click(function() { $('#aug').toggle("slow")}); 
$('#september12').click(function() { $('#sept').toggle("slow")}); 
$('#october12').click(function() { $('#oct').toggle("slow")}); 
$('#november12').click(function() { $('#nov').toggle("slow")}); 
$('#december12').click(function() { $('#dec').toggle("slow")}); 

}); 

現在這裏是怪異列表位於頁面的中間位置,每當你點擊屏幕刷新的月份並最終到達頁面的頂部時。有沒有讓這些功能,使其合乎理你拋來拋去的方式..

提前任何幫助以及感謝:d

+0

如果你是去投票請讓我知道在什麼點,以便我不犯同樣的錯誤。我想盡可能清楚地說明,如果有人有類似的問題。對不起,我是一個初學者 – TheLegend

回答

3

像你需要防止在href的默認操作這聽起來我=每個項目的「#」。

要做到這一點使用jQuery你可以寫:

$("#example").click(function(e) { 

    e.preventDefault(); 

    //Add your code here 

}); 

我有我的代碼奠定了這樣顯示的基本思想,也許是一個替代你已經制定了你的代碼可能是這樣:

$(a).click(function(e) { 
    e.preventDefault(); 

switch ($(this).attr("id")) { 
    case "january12": 
    $('#jan').toggle("slow"); 
    break; 
    case "february12": 
    $('#feb').toggle("slow"); 
    break; 
} 

}); 

您可以繼續使用switch語句來顯示和隱藏不同div的

+0

感謝幫助我看到問題。 :D你的搖滾我的襪子 – TheLegend

+0

沒問題:)祝你好運! – Undefined

1
'#january12').click(function(e) { $('#jan').toggle("slow"); e.preventDefault(); return false; });