代码之家 › 专栏 › 技术社区 › Naphstor

引导手风琴不工作。

bootstrap-accordion twitter-bootstrap css jquery javascript

2

Naphstor · 技术社区 · 7 年前

场景1:

场景2:

<script>
$(document).on('click', '.panel-title', function (e) {
    e.preventDefault();
    var $instance = $(this).find('.temp-plus');

    //var $accordions = $('.panel-title');
    //var $newInst = $(this).find('a');
    //$.each($accordions, function () {
    //    if ($newInst.hasClass('collapsed')) {
    //        $instance.removeClass('glyphicon-minus').addClass('glyphicon-plus');
    //    }
    //});

    if ($instance.hasClass('glyphicon-plus')) {
        $instance.removeClass('glyphicon-plus').addClass('glyphicon-minus');
    } else {
        $instance.removeClass('glyphicon-minus').addClass('glyphicon-plus');
    }
});
</script>

<style type="text/css">

.panel-group .panel {
    border-radius: 0;
    box-shadow: none;
    border-color: #EEEEEE;
}

.panel-default > .panel-heading {
    padding: 0;
    border-radius: 0;
    color: #212121;
    background-color: #FAFAFA;
    border-color: #EEEEEE;
}

.panel-title {
    font-size: 14px;
}

    .panel-title > a {
        display: block;
        padding: 15px;
        text-decoration: none;
    }

.more-less {
    float: right;
    color: #212121;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #EEEEEE;
}

.txt-area {
    margin: 10px;
    max-width: 1070px;
}

</style>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                <i class="more-less glyphicon glyphicon-minus temp-plus"></i>
                Input Contact Record
            </a>
        </h4>                                
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
            <div class="row">
                <div class="col-md-12">
                    <h3>
                        Notes
                    </h3>
                    <div class="well well-sm">
                        <textarea class="form-control txt-area" rows="5" id="comment" placeholder="Enter Notes..."></textarea>
                    </div>
                    <button type="button" class="btn btn-lg">
                        Confirm
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
    <br />
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
    <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            <i class="more-less glyphicon glyphicon-plus temp-plus"></i>
            Contact History
        </a>
    </h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
    <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</div>
</div>
</div>
<br />
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
    <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
            <i class="more-less glyphicon glyphicon-plus temp-plus"></i>
            Notes List
        </a>
    </h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
    <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div>
</div>
</div>

我从 here ,单击面板标题时,它只有加号,并且不会将符号更改为减号。

2 回复 | 直到 7 年前

1

2

Bourbia Brahim 7 年前

我刚刚把你的代码重新组合成引导代码段:

如果我理解了你的问题,那么下面的代码很好用

请参阅以下代码段:

//triggerd on each panel when panel is collapsed and it's annimation is finished
$('.panel-group').on('hidden.bs.collapse', toggleIcon);

//triggerd on each panel when panel is opened and it's annimation is finished
$('.panel-group').on('shown.bs.collapse', toggleIcon);


// function called on both collpase/open for each panel :
function toggleIcon(e) {
  
  var $a = $(e.target).prev(".panel-heading").find("a");
  // this is to prevent change icon on multiple click without firing  collapse/open
  if ($a.hasClass('collapsed')) {
    $a.find("i").removeClass('glyphicon-minus').addClass('glyphicon-plus');
  } else {
    $a.find("i").removeClass('glyphicon-plus').addClass('glyphicon-minus');
  }
}

.panel-group .panel {
  border-radius: 0;
  box-shadow: none;
  border-color: #EEEEEE;
}

.panel-default>.panel-heading {
  padding: 0;
  border-radius: 0;
  color: #212121;
  background-color: #FAFAFA;
  border-color: #EEEEEE;
}

.panel-title {
  font-size: 14px;
}

.panel-title>a {
  display: block;
  padding: 15px;
  text-decoration: none;
}

.more-less {
  float: right;
  color: #212121;
}

.panel-default>.panel-heading+.panel-collapse>.panel-body {
  border-top-color: #EEEEEE;
}

.txt-area {
  margin: 10px;
  max-width: 1070px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />





<div class="container demo">

    
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <i class="more-less glyphicon glyphicon-minus"></i>
                         Input Contact Record
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                    <div class="row">
                      <div class="col-md-12">
                        <h3>
                          Notes
                        </h3>
                        <div class="well well-sm">
                          <textarea class="form-control txt-area" rows="5" id="comment" placeholder="Enter Notes..."></textarea>
                        </div>
                        <button type="button" class="btn btn-lg">
                                  Confirm
                              </button>
                      </div>
                  </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <i class="more-less glyphicon glyphicon-plus"></i>
                        Contact History
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">
                    
                        Contact History
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <i class="more-less glyphicon glyphicon-plus"></i>
                        Notes List
                    </a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                <div class="panel-body">
                    
                      Notes List
                </div>
            </div>
        </div>

    </div><!-- panel-group -->
    
    
</div><!-- container -->

2

1

Rushikumar Jeremy French 7 年前

CSS:

.panel-group .panel {
    border-radius: 0;
    box-shadow: none;
    border-color: #EEEEEE;
}

.panel-default > .panel-heading {
    padding: 0;
    border-radius: 0;
    color: #212121;
    background-color: #FAFAFA;
    border-color: #EEEEEE;
}

.panel-title {
    font-size: 14px;
}

    .panel-title > a {
        display: block;
        padding: 15px;
        text-decoration: none;
    }

.more-less {
    float: right;
    color: #212121;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #EEEEEE;
}

.txt-area {
    margin: 10px;
    max-width: 1070px;
}

Javascript:

jQuery(function ($) {
    var $active = $('#accordion .panel-collapse.in').prev().addClass('active');
    $active.find('a').prepend('<i class="more-less glyphicon glyphicon-minus"></i>');
    $('#accordion .panel-heading').not($active).find('a').prepend('<i class="more-less glyphicon glyphicon-plus"></i>');
    $('#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');
    })
});

<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">Panel 1</a>
            </h4>
        </div>
        <div id="panel1" class="panel-collapse collapse in">
            <div class="panel-body">
                <div class="row">
                  <div class="col-md-12">
                      <h3>
                          Notes
                      </h3>
                      <div class="well well-sm">
                          <textarea class="form-control txt-area" rows="5" id="comment" placeholder="Enter Notes..."></textarea>
                      </div>
                      <button type="button" class="btn btn-lg">
                          Confirm
                      </button>
                  </div>
              </div>
            </div>
        </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">Panel 2</a>
            </h4>
        </div>
        <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 2
            </div>
        </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">Panel 3</a>
            </h4>
        </div>
        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 3
            </div>
        </div>
    </div>
</div>

在此处操作小提琴: https://jsfiddle.net/qpdv07vq/