jQuery UI折叠面板CSS

Question

我打算使用jQuery UI手风琴和默认主题。我发现jQuery UI手风琴从此链接的以下类中使用 link text。

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

我不想使用主题文件中的整个CSS，只需要UI手风琴所需的CSS。但是我无法创建相同的效果。有人可以帮忙吗？

- ScG

Answer 1

演示: http://so.lucafilosofi.com/jquery-ui-accordion-css/

更新到最新的 jQuery 版本 10

你不需要所有那些代码！你只是复制了 jQuery 的示例，该示例解释了 jQuery 如何创建完整的折叠部件！

你只需要像这样：

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

$(function() {
  $("#accordion").accordion();
});

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;
}

注意: 这个最低要求的CSS还需要 .ui-widget CSS，请参考演示！

- Luca Filosofi

---

是的，但你不会得到那种效果 - 比如标题不会被突出显示等。 - ScG

嗨，我已经实现了这样的功能，但是缺少箭头图标。我该如何添加该图标？ - threeleggedrabbit

@Hsakarp 你好，请看一下演示，我已经更新了它...只需查看源代码。希望能有所帮助。 - Luca Filosofi

Answer 2

在jQuery UI下载页面中，您可以选择所需的javascript和css部分。如果您取消所有选择，然后选择手风琴小部件，您将仅下载手风琴所需的JavaScript和CSS。

- Daff

Answer 3

使用以下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;
}

- Steven