0

如何为展开/折叠功能设置以下布局？

+ This is header having some text and links   
      This is item which was shown pressing + sign
      This is another item...

Twitter Bootstrap具有功能，但我无法将Collapsible Group Item #1编辑为只是“+”号并在此之后立即具有纯文本/链接。

现场http://jsfiddle.net/c4jMh/2/问题是可见的，同样的代码也在这里：

    <div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        +
      </a>
        This line should be next to above '+' sign and here some example link to be reside on that line also <a href="http://jsfiddle.net/">jsfiddle.net</a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>

我正在尝试在 web2py 框架上使用 Bootstrap 来解决这个问题。

4

2 回答 2

1

我已经修改了手风琴标题以使用表格，以便它出现在一行中。不确定这是否是您想要的。

<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
   <table>
        <tr>
            <td><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"><i class="icon-plus"></i></a></td>
    <td>  This line should be next to above '+' sign and here some example link to be reside on that line also<a href="http://jsfiddle.net/">jsfiddle.net</a></td>
        </tr>
    </table>   
</div>
<div id="collapseOne" class="accordion-body collapse in">
  <div class="accordion-inner">
    Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"   href="#collapseTwo">
    Collapsible Group Item #2
  </a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
  <div class="accordion-inner">
    Anim pariatur cliche...
    </div>
    </div>
  </div>
</div>
于 2012-12-18T09:38:06.137 回答
0

我还提供了没有使用表格格式的解决方案http://jsfiddle.net/c4jMh/4/

<div class="accordion" id="accordion2">
<div class="accordion-group">
    <div class="accordion-heading">
        <div class="accordion-toggle group-accordion-toggle">
            <a href="#collapseOne" data-parent="#accordion2" data-toggle="collapse" class=""><i class="icon-plus"></i></a>
            <a href="http://jsfiddle.net/">jsfiddle.net</a>
        </div>
    </div>
    <div id="collapseOne" class="accordion-body collapse">
        <div class="accordion-inner">Anim pariatur cliche...</div>
    </div>
</div>

<div class="accordion-group">
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"><i class="icon-plus"></i>Collapsible Group Item #2
        </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
        <div class="accordion-inner">Anim pariatur cliche...</div>
    </div>
</div>

​</p> 

$('.accordion').on('show hide', function(e) {
$(e.target).siblings('.accordion-heading').find('.accordion-toggle i').toggleClass('icon-plus icon-minus', 200);});
于 2013-01-04T18:06:13.523 回答