jQuery UI 手风琴 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2756751/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Accordion CSS
提问by ScG
I am planning to use the jQuery UI Accordion and also the default theme provided
我打算使用 jQuery UI Accordion 以及提供的默认主题
I see that the jQuery UI Accordion uses the following classes from this url link text
我看到 jQuery UI Accordion 使用了这个 url链接文本中的以下类
<div class="ui-accordion ui-widget ui-helper-reset">
<h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top">
<span class="ui-icon ui-icon-triangle-1-s"/>
<a href="#">Section 1</a>
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
Section 1 content
</div>
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-triangle-1-e"/>
<a href="#">Section 2</a>
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
Section 2 content
</div>
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-triangle-1-e"/>
<a href="#">Section 3</a>
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
Section 3 content
</div>
</div>
I do not want to use the entire CSS from the theme file, just the ones required for the UI Accordion. However I am not able to create the same effect. Anyone can help?
我不想使用主题文件中的整个 CSS，只使用 UI Accordion 所需的 CSS。但是我无法创建相同的效果。任何人都可以帮忙吗？
回答by Luca Filosofi
DEMO:http://so.lucafilosofi.com/jquery-ui-accordion-css/
演示：http : //so.lucafilosofi.com/jquery-ui-accordion-css/
updated to latest jQuery version 10
更新到最新的 jQuery 版本 10
you don't need to have all that code! you have copied the jquery example that explane how jquery create the full accordion widget!
您不需要拥有所有这些代码！您已经复制了解释 jquery 如何创建完整的手风琴小部件的 jquery 示例！
you just need to have like this:
你只需要像这样：
HTML
HTML
<div id="accordion">
<h3><a href="#">caption 1</a></h3>
<div>some text here
</div><h3><a href="#">caption 2</a></h3>
<div>some text here
</div><h3><a href="#">caption 3</a></h3>
<div>some text here
</div><h3><a href="#">caption 4</a></h3>
<div>some text here
</div>
</div>
jQuery / JS
jQuery/JS
$(function() {
$("#accordion").accordion();
});
CSS
CSS
.ui-accordion .ui-accordion-header {
cursor: pointer;
position: relative;
margin-top: 1px;
zoom: 1;
}
.ui-accordion .ui-accordion-li-fix {
display: inline;
}
.ui-accordion .ui-accordion-header-active {
border-bottom: 0 !important;
}
.ui-accordion .ui-accordion-header a {
display: block;
font-size: 1em;
padding: .5em .5em .5em .7em;
}
/* IE7-/Win - Fix extra vertical space in lists */
.ui-accordion a {
zoom: 1;
}
.ui-accordion-icons .ui-accordion-header a {
padding-left: 2.2em;
}
.ui-accordion .ui-accordion-header .ui-icon {
position: absolute;
left: .5em;
top: 50%;
margin-top: -8px;
}
.ui-accordion .ui-accordion-content {
padding: 1em 2.2em;
border-top: 0;
margin-top: -2px;
position: relative;
top: 1px;
margin-bottom: 2px;
overflow: auto;
display: none;
zoom: 1;
}
.ui-accordion .ui-accordion-content-active {
display: block;
}
NOTE:this minimum css require also the .ui-widget CSS see the demo!
注意：这个最小的 css 还需要 .ui-widget CSS 看演示！
回答by Daff
In the jQuery UI Download pageyou can select the parts of the javascript and css you need. If you deselect all and then select the Accordion widget you will get only the JavaScript and CSS for the accordion in your download.
在jQuery UI 下载页面中，您可以选择您需要的 javascript 和 css 部分。如果您取消全选，然后选择手风琴小部件，您将在下载中仅获得手风琴的 JavaScript 和 CSS。
回答by Steven
For the highlighting effect and everything use this css
为了突出显示效果，一切都使用这个 css
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
border: 1px solid #999999/*{borderColorHover}*/;
background: #dadada/*{bgColorHover}*/ url(images/ui-bg_glass_75_dadada_1x400.png)/*{bgImgUrlHover}*/ 50%/*{bgHoverXPos}*/ 50%/*{bgHoverYPos}*/ repeat-x/*{bgHoverRepeat}*/;
font-weight: normal/*{fwDefault}*/;
color: #212121/*{fcHover}*/;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
color: #212121/*{fcHover}*/;
text-decoration: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
border: 1px solid #aaaaaa/*{borderColorActive}*/;
background: #ffffff/*{bgColorActive}*/ url(images/ui-bg_glass_65_ffffff_1x400.png)/*{bgImgUrlActive}*/ 50%/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/;
font-weight: normal/*{fwDefault}*/;
color: #212121/*{fcActive}*/;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
color: #212121/*{fcActive}*/;
text-decoration: none;
}
.ui-accordion .ui-accordion-header {
display: block;
cursor: pointer;
position: relative;
margin-top: 2px;
padding: .5em .5em .5em .7em;
min-height: 0; /* support: IE7 */
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
.ui-accordion .ui-accordion-header :hover{background-color:#f7f7f7;}
.ui-accordion .ui-accordion-icons {
padding-left: 2.2em;
}
.ui-accordion .ui-accordion-noicons {
padding-left: .7em;
}
.ui-accordion .ui-accordion-icons .ui-accordion-icons {
padding-left: 2.2em;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
position: absolute;
left: .5em;
top: 50%;
margin-top: -8px;
}
.ui-accordion .ui-accordion-content {
padding: 2em 1.2em;
border-top: 0;
overflow: auto;
}
