2010-04-23 225 views
0

我在jQuery UI的CSS樣式中是全新的,請耐心等待。獲取非手風琴元素的手風琴風格

我必須列出聯繫人列表。

<div id="accordion"> 
    <h3><a href="#">George Foo</a></h3> 
    <div> 
     some information 
    </div> 
    <h3><a href="#">Michelle Bar</a></h3> 
    <div> 
     some information 
    </div> 
    <h3><a href="#">Bill Wind</a></h3> 
    <div> 
     some information 
    </div> 
</div> 

起初,我認爲使用手風琴風格。但是,使用情況表明,打開多個聯繫人可能也很有趣。所以,我讀了accordion page底部的音符,而不是用手風琴這樣的:

From page: 

jQuery(document).ready(function(){ 
$('.accordion .head').click(function() { 
    $(this).next().toggle('slow'); 
    return false; 
}).next().hide(); 
}); 

我的問題是,它並不像手風琴(光滑的風格)。我想我不會把手風琴類放在正確的位置,但截至目前,名稱看起來像默認鏈接。 如何在不使用手風琴的情況下使用與手風琴效果相同的外觀? 我試着四處搜尋,但從我發現的具體問題沒有多少討論。

謝謝。

回答

1

slideToggle()怎麼樣?

$(document).ready(function() { 
    $("#accordion a").click(function() { 
    $(this).next.slideToggle(); 
    return false; 
    }).next().hide(); 
}); 

如果你想樣式添加到被accordionified的鏈接(就是一個字?),你可以試試:

$("#accordion a").each(function() { 
    $(this).addClass('someClass').removeClass('someOtherClass'); 
}); 

如果你正在尋找去發現風格的手風琴適用什麼到鏈接,看看它在另一個網站上的執行情況,並檢查與Firebug的元素,以查看所使用的類,然後你可以在該樣式錶鏈接..

+0

它的工作原理,但我的鏈接仍然有默認*看起來這些href。我希望手風琴有相同的外觀。 .accordion()函數在目標上應用了特定的CSS樣式,這使得一切都變得非常漂亮 - 但是如果我不想使用手風琴就想要這些樣式呢?這是我卡住的地方,它只是關於外觀,我不知道要修改什麼來模仿樣式表.accordion()使用。 – 2010-04-23 10:48:14

+0

編輯我的帖子,嘗試更好地回答你的問題 - 你在找什麼? – Jeriko 2010-04-23 11:06:27

+0

是的,我越來越近了。 我按照您的建議使用FireBug進行了檢查,並且在點擊過程中發生了一些負載變化。我希望有更簡單的方法來模仿accorion的外觀,但是我必須添加我自己的CSS。 謝謝。 – 2010-04-23 11:19:39

1

如果你只是想讓他們有手風琴風格,你可以檢查類jQuer y UI增加了實際的手風琴,例如使用類似Firebug的工具。最後,它可能看起來是這樣的:

<div id="accordion" class="ui-widget-content padding ui-corner-bottom ui-accordion ui-widget"> 
    <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"> 
     <a href="#">George Foo</a> 
    </h3> 
    <div> 
     some information 
    </div> 
    <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"> 
     <a href="#">Michelle Bar</a> 
    </h3> 
    <div> 
     some information 
    </div> 
    <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"> 
     <a href="#">Bill Wind</a> 
    </h3> 
    <div> 
     some information 
    </div> 
</div> 

如果你只是想改變現有手風琴的默認行爲,它可能更容易有添加的功能,而不是重建整個事情的。