獲取非手風琴元素的手風琴風格

我在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(); 
});

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

謝謝。

來源

2010-04-23 SK.

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的元素，以查看所使用的類，然後你可以在該樣式錶鏈接..

來源

2010-04-23 10:27:46 Jeriko

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

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

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

如果你只是想讓他們有手風琴風格，你可以檢查類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>

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

來源

2010-04-23 11:36:41 Daff

獲取非手風琴元素的手風琴風格

回答

相關問題