jQuery UI Accordion CSS

Question

我打算使用jQuery UI Accordion以及提供的默认主题

我看到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>

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

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才能看到演示!

Answer 2

在jQuery UI下载页面中,您可以选择所需的javascript和css部分.如果您取消选择全部然后选择Accordion小部件,您将只下载下载手风琴的JavaScript和CSS.