0

Estou tentando utilizar o "box collapse" do template do AdminLTE (figura abaixo), porém ao renderizar de forma dinâmica ele não se expande ao clicar no '+'. Estou utilizando o código abaixo em uma PartialView.

Tentei utilizar a função delegate do jQuery, porém não sei quais elementos selecionar e as funções a serem utilizadas para expandir e fechar.

inserir a descrição da imagem aqui

@foreach (var item in Model)
{
<div class="row">
    <div class="col-md-12">
        <div class="box box-default collapsed-box item-collapsed">
            <div class="box-header with-border">
                <h3 class="box-title">@item.Nome</h3>

                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse">
                        <i class="fa fa-plus"></i>
                    </button>
                </div>
            </div>
            <div class="box-body">
                <p>Descrição: @item.Descricao</p>
                <p>Preço: @item.Preco</p>
                <p>Quantidade: @item.Quantidade</p>
            </div>
        </div>
    </div>
</div>
}
4
  • voce pode usar o collapse bootstrap Commented 29/12/2017 às 14:26
  • É porque não vi no bootstrap desse modelo. Só vi com botões e o accordion.
    – Raphael
    Commented 29/12/2017 às 14:31
  • nao entendi muito bem, pode explicar melhor o que voce quer Commented 29/12/2017 às 14:34
  • Só queria poder expandir o collapse através do "+", pois, como disse, ao renderizar dinamicamente a expansão não funciona.
    – Raphael
    Commented 29/12/2017 às 14:43

1 Resposta 1

0

Removi a classe "item-collapsed", envolvi na div "divItens" e adicionei a classe "btn-expandir" ao button. Depois apliquei o seguinte jQuery:

$("#divItens").delegate(".btn-expandir", "click", function (e) {
    $(this).parent().parent().parent().toggleClass('collapsed-box');
});

<div id="divItens">
@foreach (var item in Model)
{
<div class="row">
    <div class="col-md-12">
        <div class="box box-default collapsed-box">
            <div class="box-header with-border">
                <h3 class="box-title">@item.Nome</h3>

                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool btn-expandir" data-widget="collapse">
                        <i class="fa fa-plus"></i>
                    </button>
                </div>
            </div>
            <div class="box-body">
                <p>Descrição: @item.Descricao</p>
                <p>Preço: @item.Preco</p>
                <p>Quantidade: @item.Quantidade</p>
            </div>
        </div>
    </div>
</div>
}
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .