Question

我正在尝试使用Bootstrap创建一个Accordion菜单。我找到了一个解决方案here并且效果非常好，但是，当我点击最后一个面板中的选项菜单链接时它正在关闭，我不知道如何解决这个问题，它需要保持第二个菜单打开然后关闭第一个菜单。我认为这是因为页面正在重新加载。那么，我该如何解决这个问题呢？

手风琴

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-red">
        <div class="panel-heading bg-red" 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">
                    Pesquisas
                </a>
            </h4>
        </div><!--/title-->
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                <ul class="nav nav-pills nav-stacked">                    
                    <li><a href="@Url.Action("viewAnaliseAdmin", "Pesquisa")" class="glyphicon glyphicon-th"> Recebidas</a></li>
                    <li><a href="@Url.Action("viewPesquisaEmAnaliseAdmin", "Pesquisa")" class="glyphicon glyphicon-th"> Análise</a></li>
                    <li><a href="@Url.Action("viewPesquisaAprovadaAdmin", "Pesquisa")" class="glyphicon glyphicon-th"> Aprovadas</a></li>                    
                </ul>
            </div>
        </div>
    </div><!--/panel 1-->

    <div class="panel panel-red">
        <div class="panel-heading bg-red" role="tab" id="headingTwo">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    Configurações
                </a>
            </h4>
        </div><!--/title-->
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
                <ul class="nav nav-pills nav-stacked">
                    <li><a href="@Url.Action("Index", "Estado")" class="glyphicon glyphicon-th"> Estados</a></li>
                    <li><a href="@Url.Action("Index", "Condado")" class="glyphicon glyphicon-th"> Condados</a></li>
                    <li><a href="@Url.Action("viewAllAdmin","Usuario")" class="glyphicon glyphicon-user"> Usuários</a></li>
                </ul>
            </div>
        </div>
    </div><!--/panel 2-->


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

Answer 1

我解决了我的问题。我做了一个修复来帮助我控制手风琴并且效果很好。

我做了

<强> HTML

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-red">
        <div class="panel-heading bg-red" role="tab" id="headingOne">
            <h4 class="panel-title">
                <a class="collapsed" id="collapseOnee" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Pesquisas
                </a>
            </h4>
        </div><!--/title-->
        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                <ul class="nav nav-pills nav-stacked">                    
                    <li><a href="@Url.Action("viewAnaliseAdmin", "Pesquisa")" class="glyphicon glyphicon-th"> Recebidas</a></li>
                    <li><a href="@Url.Action("viewPesquisaEmAnaliseAdmin", "Pesquisa")" class="glyphicon glyphicon-th"> Análise</a></li>
                    <li><a href="@Url.Action("viewPesquisaAprovadaAdmin", "Pesquisa")" class="glyphicon glyphicon-th"> Aprovadas</a></li>                    
                </ul>
            </div>
        </div>
    </div><!--/panel 1-->

    <div class="panel panel-red">
        <div class="panel-heading bg-red" 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">
                    Configurações
                </a>
            </h4>
        </div><!--/title-->
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
                <ul class="nav nav-pills nav-stacked">
                    <li><a href="@Url.Action("Index", "Estado")" class="glyphicon glyphicon-th"> Estados</a></li>
                    <li><a href="@Url.Action("Index", "Condado")" class="glyphicon glyphicon-th"> Condados</a></li>
                    <li><a href="@Url.Action("viewAllAdmin","Usuario")" class="glyphicon glyphicon-user"> Usuários</a></li>
                </ul>
            </div>
        </div>
    </div><!--/panel 2-->


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

JQuery Fix

$(document).ready(function () {
    var collapseItem = localStorage.getItem('collapseItem');
    if (collapseItem === '') {
        var collapseItem = $('#collapseOnee').attr('aria-controls');
        localStorage.setItem('collapseItem', collapseItem);
        collapseItem = localStorage.getItem('collapseItem');
    }
    $(collapseItem).collapse('show')
});


$('.collapsed').on('click', function () {
    var collapseItem = '#' + $(this).attr('aria-controls'); 
    localStorage.setItem('collapseItem', collapseItem);    
});

手风琴菜单在点击链接后关闭？

1 个答案: