手风琴

手风琴

关注
发信
关注(28)粉丝(399)

javascript - Bootstrap Accordion 无法正常工作。

嗨，我正在创建一个带有加减符号的自举式手风琴的网页。目的是在加载页面时扩展第一手风琴。然后，在单击任何其他手风琴时可以将其折叠。我面临的问题是，单击另一个手风琴时，默认扩展手风琴的符号不会改变。那是手风琴倒塌了，但是符号保持不变。以下是问题的屏幕截图。

方案1：
javascript - Bootstrap Accordion 无法正常工作。-LMLPHP

方案2：javascript - Bootstrap Accordion 无法正常工作。-LMLPHP

以下是我的HTML脚本：

<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那里获得了引用，当单击面板标题时，它只有加号，而不会将符号改为减号。

我是前端开发的新手，因此不确定我的脚本或div中是否缺少任何内容。任何帮助都会很棒。

最佳答案

我只是在您的代码之间重新创建了作为启动代码段的组合：

如果我理解了您的问题，下面的代码也很好用

请参阅以下代码段：



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

10-06 09:37
Powered by LMLPHP ©2024 手风琴 0.029263