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

表を使用するようにアコーディオンの見出しを変更して、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 に答える