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/

我被困在那里。

我想将面板标题中的加/减图像移到右下角，文本＆＃34;展开＆＃34;应遵循规则;展示＆＃34;展开＆＃34;当小组没有扩展时，＆＃34;崩溃＆＃34;当它扩大时。

谢谢！

Answer 1

我最初将字形符号放在.expandPanel中，所以它们会出现在右下方，并编辑你的JS一点点，使它们和左侧的文字一样：

＆＃13;

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');
    });


});

＆＃13;

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

＆＃13;

希望这有帮助！

带有两个/更少链接

1 个答案: