如何在JQuery中将其他元素添加到手风琴的标题中?

时间:2015-03-19 22:02:59

标签: javascript jquery html css jquery-ui

我正在尝试使用包含button-esk元素的标题创建一个手风琴,该元素将说明该部分中的项目数。

EXAMPLE OF THE HEADER I AM TRYING TO CREATE

如何编辑/添加到jquery-ui以包含除左侧文本和图标之外的其他元素。

如果您可以简单地指向jquery-ui中足以满足的那一行。

我只是在寻找每个发言的提示。我不是要求构建那个“数字”元素。只是简单地在哪里创建它。

2 个答案:

答案 0 :(得分:1)

<div id="accordion">

  <h3>Section 1    <span class="one">12</span></h3> <!-- these are your accordion header -->
  <div>
    ...
  </div>
  <h3>Section 2  <span class="two">29</span></h3>
  <div>
    ...
  </div>
  <h3>Section 3  <span class="one">can be text</span></h3>
  <div>
    ....
  </div>
</div>

now you have to add 

$( "#accordion" ).accordion();

你可以使它更具动态性,你必须使用$ .each,如果有列表,你可以获得列表的编号并显示它们。

答案 1 :(得分:0)

查看docs

<div id="accordion">
    <h3>Section 1 <span>**your number section could be here**</span></h3>
    <div>
       <p>foo</p>
    </div>
    <h3>Section 2 <span>**your number section could be here**</span></h3>
    <div>
       <p>foo</p>
    </div>
</div>

如果点击,<h3></h3>内的任何内容都会触发手风琴。 您可以使用css设置样式:

#accordion h3 span { 
    background-color: black;
    color: yellow;
    padding: 5px;
    ....
}