堆栈内存溢出
  繁体   English   中英

Bootstrap手风琴无法正常工作。

[英]Bootstrap accordion not working.

 原文  2017-06-28 13:47:28  9   2    javascript/ jquery/ css/ twitter-bootstrap/ bootstrap-accordion

问题描述

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

方案1： 在此处输入图片说明

方案2： 在此处输入图片说明

以下是我的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>

我从此处获取参考，单击面板标题时，它只有加号，而没有将符号改为减号。

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

2 个解决方案

解决方案1
 2 已采纳  2017-06-28 14:25:22

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

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

请参阅以下代码段： 

 //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  2017-06-28 14:18:17

全部固定； 这是代码-

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

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 dd手风琴无法正常工作。 控制台中未显示任何错误 Bootstrap Forms手风琴无法正常工作 Bootstrap手风琴折叠无法正常工作 Bootstrap手风琴不使用角度7 bootstrap手风琴不能正常工作 Bootstrap手风琴无法正常工作 Bootstrap手风琴无法正常工作 Bootstrap 手风琴在 angular 9 中不起作用 Bootstrap 4复选框手风琴不起作用 Bootstrap / Jquery手风琴无法正常工作
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM