获取非手风琴元素的手风琴风格

我在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

获取非手风琴元素的手风琴风格

回答

相关问题