带有两个更多/更少链接的引导手风琴

Question

我正在尝试创建一个可折叠面板，可以在面板标题和右下角的文本上单击两个点来展开/折叠它。

到目前为止我所做的是：

HTML：

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1">Title Panel 1</a>
            </h4>
        </div>
        <div id="panel1" class="panel-collapse collapse in">
            <div class="panel-body">
                Contents panel 1
            </div>
        </div>
        <div class="expandPanel">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1">Expand</a>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">Title Panel 2</a>
            </h4>
        </div>
        <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 2
            </div>
        </div>
        <div class="expandPanel">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">Expand</a>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3">Title Panel 3</a>
            </h4>
        </div>
        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 3
            </div>
        </div>
        <div class="expandPanel">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3">Expand</a>
        </div>
    </div>
</div>

Javascript：

jQuery(function ($) {
    var $active = $('#accordion .panel-collapse.in').prev().addClass('active');
    $active.find('a').append('<span class="glyphicon glyphicon-minus pull-right"></span>');
    $('#accordion .panel-heading').not($active).find('a').prepend('<span class="glyphicon glyphicon-plus pull-right"></span>');
    $('#accordion').on('show.bs.collapse', function (e)
    {
        $('#accordion .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
        $(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
    });
    $('#accordion').on('hide.bs.collapse', function (e)
    {
        $(e.target).prev().removeClass('active').find('.glyphicon').removeClass('glyphicon-minus').addClass('glyphicon-plus');
    });
});

http://jsfiddle.net/f908rx8v/1/

我被困在那里了。

我想将加/减图像从面板标题移到右下角，并且文本“扩展”应该遵循规则；面板未展开时显示“展开”，展开时显示“折叠”。

谢谢！

Answer 1

我最初将字形图标放在 .expandPanel a 中，因此它们会出现在右下角，并稍微编辑您的 JS 以使它们以及左侧的文本更新：

jQuery(function ($) {

    $('.panel-collapse').on('hide.bs.collapse', function() {
      var expandPanel = $(this).next('.expandPanel');

      expandPanel
        .find('.toggle-text').text('Expand');

      expandPanel
        .find('.glyphicon')
          .removeClass('glyphicon-minus')
          .addClass('glyphicon-plus');
    });

    $('.panel-collapse').on('show.bs.collapse', function() {
      var expandPanel = $(this).next('.expandPanel');

      expandPanel
        .find('.toggle-text').text('Collapse');

      expandPanel
        .find('.glyphicon')
          .removeClass('glyphicon-plus')
          .addClass('glyphicon-minus');
    });


});

      <div class="panel-group" id="accordion">
          <div class="panel panel-default">
              <div class="panel-heading">
                  <h4 class="panel-title">
                      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1">Title Panel 1</a>
                  </h4>
              </div>
              <div id="panel1" class="panel-collapse collapse in">
                  <div class="panel-body">
                      Contents panel 1
                  </div>
              </div>
              <div class="expandPanel">
                  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">
                    <span class="toggle-text">Collapse</span>
                    <span class="glyphicon glyphicon-minus pull-right"></span>
                  </a>
              </div>
          </div>
          <div class="panel panel-default">
              <div class="panel-heading">
                  <h4 class="panel-title">
                      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">Title Panel 2</a>
                  </h4>
              </div>
              <div id="panel2" class="panel-collapse collapse">
                  <div class="panel-body">
                      Contents panel 2
                  </div>
              </div>
              <div class="expandPanel">
                  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">
                    <span class="toggle-text">Expand</span>
                    <span class="glyphicon glyphicon-plus pull-right"></span>
                  </a>
              </div>
          </div>
          <div class="panel panel-default">
              <div class="panel-heading">
                  <h4 class="panel-title">
                      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3">Title Panel 3</a>
                  </h4>
              </div>
              <div id="panel3" class="panel-collapse collapse">
                  <div class="panel-body">
                      Contents panel 3
                  </div>
              </div>
              <div class="expandPanel">
                  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3">
                    <span class="toggle-text">Expand</span>
                    <span class="glyphicon glyphicon-plus pull-right"></span>
                  </a>
              </div>
          </div>
      </div>

希望这会有所帮助！