Drop-down content goes here.
下拉内容在这里。
div>
Second accordion item
第二个手风琴项目 h3>
Drop-down content goes here.
下拉内容在这里。
div>
div>
code> pre>
Sample CSS
示例CSS h4>
Here is some sample CSS to get you started if you want to customize the look and feel of the accordion.
如果想自定义手风琴的外观,这里有一些CSS入门示例。 p>
/* Accordion Styles */ / *手风琴样式* /.accordion {
.accordion {
border-bottom: 1px solid #dbdbdb;
border-bottom:1px实心#dbdbdb;
margin-bottom: 20px;
底边距:20px;
}
}
.accordion-title {
.accordion-title {
border-top: 1px solid #dbdbdb;
border-top:1px实心#dbdbdb;
margin: 0;
边距:0;
padding: 20px 0;
填充:20px 0;
cursor: pointer;
光标:指针;
}
}
.accordion-title:hover {}
.accordion-title:hover {}
.accordion-title:first-child {border: none;}
.accordion-title:第一胎{border:none;}
.accordion-title.open {cursor: default;}
.accordion-title.open {光标:默认;}
.accordion-content {padding-bottom: 20px;}
.accordion-content {padding-bottom:20px;}
code> pre>
Opening an Accordion Via ID
通过ID打开手风琴 h4>
You can optionally add a unique ID to each of your accordion items and then use that ID in the URL to open that item by default.
您可以选择为每个手风琴项目添加一个唯一的ID,然后默认使用URL中的该ID打开该项目。
For example, say you have the following accordions:
例如,假设您有以下手风琴: p>
[accordion] [手风琴][accordion-item id="item-1" title="Title of accordion item"]Drop-down content goes here.[/accordion-item]
[accordion-item id =“ item-1” title =“手风琴项目的标题”]下拉内容在此处。[/ accordion-item]
[accordion-item id="item-2" title="Second accordion item"]Drop-down content goes here.[/accordion-item]
[accordion-item id =“ item-2” title =“第二手风琴产品”]下拉内容在此处。[/ accordion-item]
[accordion-item id="item-3" title="A Third accordion"]Drop-down content goes here.[/accordion-item]
[accordion-item id =“ item-3” title =“第三手风琴”]下拉内容在此处。[/ accordion-item]
[/accordion]
[/手风琴]
code> pre>
You could use this URL to open the third item by default:
默认情况下,您可以使用此URL打开第三项: p>
http://yourdomain.com/your/path/#item-3 http://yourdomain.com/your/path/#item-3
code> pre>
All you need to do is ensure that the part after the #
in the URL matches the ID set on the accordion item.
您需要做的就是确保URL中# code>之后的部分与在手风琴项目上设置的ID匹配。 p>Advanced Accordion Settings
高级手风琴设置 h4>
There are a few advanced settings you can add to the opening accordion shortcode.
您可以将一些高级设置添加到开头的手风琴简码中。
The full shortcode, with all the default settings looks like this:
完整的短代码以及所有默认设置如下所示: p>
[accordion autoclose="true" openfirst="false" openall="false" clicktoclose="false"] [手风琴autoclose =“ true” openfirst =“ false” openall =“ false” clicktoclose =“ false”]
code> pre>
autoclose: Sets whether accordion items close automatically when you open the next item.
自动关闭 strong>:设置手风琴项目在打开下一个项目时是否自动关闭。Set autoclose="true/false"
on the opening accordion shortcode like this: [accordion autoclose="false"]
.
在开头的手风琴简码上设置 autoclose =“ true / false” code>,如下所示: [accordion autoclose =“ false”] code>。Default is true
.
默认值为 true code>。 p>openfirst: Sets whether the first accordion item is open by default.
首先打开 strong>:设置默认情况下第一个手风琴项目是否处于打开状态。This setting will be overridden if openall is set to true.
如果 openall strong>设置为true,则此设置将被覆盖。Set openfirst="true/false"
on the opening accordion shortcode like this: [accordion openfirst="true"]
.
在开头的手风琴简码上设置 openfirst =“ true / false” code>,如下所示: [accordion openfirst =“ true”] code>。Default is false
.
默认值为 false code>。 p>openall: Sets whether all accordion items are open by default.
openall strong>:设置默认情况下是否打开所有手风琴项目。It is recommended that this setting be used with clicktoclose.
建议将此设置与 clicktoclose strong>一起使用。Set openall="true/false"
on the opening accordion shortcode like this: [accordion openall="true"]
.
在开头的手风琴简码上设置 openall =“ true / false” code>,如下所示: [accordion openall =“ true”] code>。Default is false
.
默认值为 false code>。 p>clicktoclose: Sets whether clicking an open title closes it.
clicktoclose strong>:设置是否单击打开的标题将其关闭。Set clicktoclose="true/false"
on the opening accordion shortcode like this: [accordion clicktoclose="true"]
.
在开头的手风琴简码上设置 clicktoclose =“ true / false” code>,如下所示: [accordion clicktoclose =“ true”] code>。Default is false
.
默认值为 false code>。 p>scroll: Sets whether to scroll to the title when it’s clicked open.
滚动 strong>:设置单击标题时是否滚动到标题。This is useful if you have a lot of content within your accordion items.
如果您在手风琴项目中有很多内容,这将很有用。
Set scroll="true/false"
on the opening accordion shortcode like this: [accordion scroll="true"]
.
在开头的手风琴简码上设置 scroll =“ true / false” code>,如下所示: [accordion scroll =“ true”] code>。Default is false
.
默认值为 false code>。You may also specify an integer for a pixel offset if you’d like the page to scroll further (useful when the site uses a fixed position header navigation).
如果您想让页面进一步滚动,则也可以为像素偏移量指定一个整数(在网站使用固定位置标题导航时很有用)。
NOTE: Only use pixel offset integers of > 0. If you do not want a scroll offset, but still want scrolling, simply use scroll="true"
.
注意:仅使用大于0的像素偏移整数。如果您不希望滚动偏移,但仍希望滚动,只需使用 scroll =“ true” code>。 p>class: Sets a custom CSS class for the accordion group or individual accordion items.
类 strong>:为手风琴组或单个手风琴项目设置自定义CSS类。Set class="your-class-name"
on the opening accordion or accordion-item shortcode like this: [accordion class="your-class-name"]
or <
在开头的手风琴或手风琴项目短代码上设置 class =“ your-class-name” code>,如下所示: [accordion class =“ your-class-name”] code>或<code>[accordion-item class="your-class-name"]
.代码> [手风琴物品类=“您的班级名称”] code>。
Added a class to the accordion-item will add the class to the title HTML tag.
在手风琴项目中添加了一个类,该类将添加到标题HTML标签中。 p>
tag: Set the global HTML tag to use for all accordion titles.
标签 strong>:设置全局HTML标签以用于所有手风琴标题。Set tag="h2"
on the opening accordion shortcode like this: [accordion tag="h2"]
.
在开头的手风琴简码上设置 tag =“ h2” code>,如下所示: [accordion tag =“ h2”] code>。Default is h3
.
默认值为 h3 code>。 p>semantics: You can change the entire semantic structure of the accordions to use a definition list (dl, dt, dd) by setting semantics="dl"
on the
语义 strong>:您可以通过在键盘上设置 semantics =“ dl” code>来更改手风琴的整个语义结构,以使用定义列表(dl,dt,dd)。opening accordion shortcode like this: [accordion semantics="dl"]
.
像这样打开手风琴简码: [accordion语义s =“ dl”] code>。By default the accordion will use div
tags for the wrapper and content containers.
默认情况下,手风琴将对包装容器和内容容器使用 div code>标签。If you set this option to dl
, it is recommended that you do not also use the tag
option.
如果将此选项设置为 dl code>,建议您不要同时使用 tag code>选项。This feature is not selectable from the accordion button dialog box and must be added manually.
无法从“手风琴按钮”对话框中选择此功能,必须手动添加。 p>
Advanced Accordion Item Settings
高级手风琴项目设置 h4>
state: Sets the initial state of the accordion item to open
or closed
.
状态 strong>:将手风琴项目的初始状态设置为 open code>或 closed code>。Set state=open
or state=closed
on the opening accordion item shortcode like this: [accordion-item state=open]
.
在开头的手风琴项目短代码上设置 state = open code>或 state = closed code>,如下所示: [accordion-item state = open] code>。This setting will override all other accordion settings except when linking to an accordion item via ID.
此设置将覆盖所有其他手风琴设置,除非通过ID链接到手风琴项目。 p>
tag: You can also set the HTML tag for the titles of each accordion item individually by adding tag="tagname"
to each [accordion-item 标签 strong>:您还可以通过在每个 [accordion-item]上添加 tag =“ tagname” code>来分别为每个手风琴项目的标题设置HTML标签。 ]
shortcode.] code>简码。
Make sure to not include the angle brackets around the tag name.
请确保不 strong>在标签名称周围包括尖括号。Example: to use
instead of the default
tag: [accordion-item title="Item title" tag="h2"]Item示例:使用 code>代替默认的 code>标记: [手风琴项目标题=“项目标题” tag =“ h2”]项目content[/accordion-item]
.
内容[/ accordion-item] code>。
Using a tag attribute on an individual accordion item will override the global setting.
在单个手风琴项目上使用标签属性将覆盖全局设置。
The list of valid tags is: h1, h2, h3, h4, h5, h6, p, div.
有效标签列表为:h1,h2,h3,h4,h5,h6,p,div。 p>
usebutons: You can now optionally wrap each accordion item title in a
tag by adding usebuttons="true"
to the
使用按钮 strong>:现在,您可以选择将每个手风琴项目标题包装在