Question

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

我的问题是它看起来不像手风琴（平滑风格）。我想我并没有将手风琴和 head 类放在正确的位置，但截至目前，名称看起来像默认链接。如何在不使用手风琴的情况下使用与手风琴效果相同的标题？我试着四处寻找，但是从我发现的问题来看，没有太多讨论。

感谢。

Answer 1

slideToggle()怎么样？

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

如果你想为手风琴化的链接添加样式（是一个单词？），请尝试以下方法：

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

如果您想要确切地发现手风琴适用于链接的样式，请查看其他网站上的实现，并使用Firebug检查元素以查看所使用的类，然后您就可以链接在那个样式表中..

Answer 2

如果您只想让它们具有手风琴风格，您可以检查jQuery 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>

如果您只想更改现有手风琴的默认行为，可能更容易在那里添加您的功能，而不是重建整个手风琴。

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

2 个答案: