Question

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

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

Answer 1

我已经修改了accordion-heading来使用表格，因此它只有一行。不确定这是不是你想要的。

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

Answer 2

我还提供了解决方案，其中没有使用表格格式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>

$('.accordion').on('show hide', function(e) {
$(e.target).siblings('.accordion-heading').find('.accordion-toggle i').toggleClass('icon-plus icon-minus', 200);});

Twitter Bootstrap折叠功能标题编辑很难

2 个答案: