0

Dada uma sidebar, como faço para obter o efeito de um accordion?

Atualmente, a minha sidebar funciona quase perfeitamente. Isso quer dizer que, ao clicar em menus que possuem submenus, eles são expandidos. Eu só não estou conseguindo fazer com que um menu expansível recolha (collapse) quando outro menu (também expansível) for selecionado.

Segue meu código da sidebar:

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

<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul class="nav navbar-nav side-nav">
    <li>
      <a href="javascript:;" data-toggle="collapse" data-target="#acc-dashboard"><i class="fa fa-window-restore sb-icon text-center"></i><span class="sb-span">Dashboards</span>
      <i class="fa fa-fw fa-angle-right pull-right"></i></a>
      <ul id="acc-dashboard" class="collapse">
        <li class="nav-item-1">
          <a href="#"><span class="sb-span">Entregas</span></a>
        </li>
        <li>
          <a href="#"><span class="sb-span">Mesas</span></a>
        </li>
      </ul>
    </li>
    <li>
      <a href="javascript:;" data-toggle="collapse" data-target="#acc-financeiro"><i class="fa fa-dollar sb-icon text-center"></i><span class="sb-span">Financeiro</span>
      <i class="fa fa-fw fa-angle-right pull-right"></i></a>
      <ul id="acc-financeiro" class="collapse">
        <li>
          <a href="#"><span class="sb-span">Contas a receber</span></a>
        </li>
        <li>
          <a href="#"><span class="sb-span">Contas a pagar</span></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Visualizar o exemplo acima em "Página toda".

2
  • Você já tentou utilizar o dropdown?
    – Woss
    10/05/2017 às 2:03
  • Estou dando uma olhada na documentação do w3c. Acredito que a solução para o que eu preciso está no data-parent. Mas, por enquanto, nada ainda.
    – fnx
    10/05/2017 às 2:09

2 Respostas 2

1

Veja um exemplo utilizando o componente dropdown do Bootstrap:

Ao clicar em Executar, visualize em Página toda, à direita do botão Executar.

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

<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul class="nav navbar-nav side-nav">
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">
        <i class="fa fa-window-restore sb-icon text-center"></i>
        <span class="sb-span">Dashboards</span>
        <i class="fa fa-fw fa-angle-right pull-right"></i>
      </a>
      <ul class="dropdown-menu">
        <li class="nav-item-1">
          <a href="#"><span class="sb-span">Entregas</span></a>
        </li>
        <li>
          <a href="#"><span class="sb-span">Mesas</span></a>
        </li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">
        <i class="fa fa-dollar sb-icon text-center"></i>
        <span class="sb-span">Financeiro</span>
        <i class="fa fa-fw fa-angle-right pull-right"></i>
      </a>
      <ul class="dropdown-menu">
        <li>
          <a href="#"><span class="sb-span">Contas a receber</span></a>
        </li>
        <li>
          <a href="#"><span class="sb-span">Contas a pagar</span></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Consiste em basicamente você adicionar a classe dropdown ao elemento pai do elemento que abrirá o menu. No seu caso, como serão os elementos a os responsáveis, adicione a classe dropdown aos elementos li. Aos elementos a adicione o atributo data-toggle="dropdown" e os elementos ul que representam os submenus adicione a classe dropdown-menu. Desta forma o comportamento do menu será exatamente o que você deseja. Acredito que o comportamento padrão do accordion é manter os itens abertos mesmo quando outros são também abertos e não seria muito recomendado alterar este comportamento, pois o código acaba ficando inconsistente. Acredito que o dropdown faz bem o que você precisa.

0

Encontrei a solução. Tive que fazer algumas modificações e utilizar a classe panel nas tags li da minha sidebar.

Ficou basicamente assim:

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


<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul id="accordion1" class="nav navbar-nav side-nav">
    <li class="panel">
      <a data-toggle="collapse" data-parent="#accordion1" href="#acc-dashboard">
        <i class="fa fa-window-restore sb-icon text-center"></i><span class="sb-span">Dashboards</span>
        <i class="fa fa-fw fa-angle-right pull-right"></i></a>
      <ul id="acc-dashboard" class="collapse">
        <li class="nav-item-1">
          <a href="#"><span class="sb-span">Entregas</span></a>
        </li>
        <li>
          <a href="#"><span class="sb-span">Mesas</span></a>
        </li>
      </ul>
    </li>
    <li class="panel">
      <a data-toggle="collapse" data-parent="#accordion1" href="#acc-financeiro">
        <i class="fa fa-dollar sb-icon text-center"></i><span class="sb-span">Financeiro</span>
        <i class="fa fa-fw fa-angle-right pull-right"></i></a>
      <ul id="acc-financeiro" class="collapse">
        <li>
          <a href="#"><span class="sb-span">Contas a receber</span></a>
        </li>
        <li>
          <a href="#"><span class="sb-span">Contas a pagar</span></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

1
  • Pode funcionar, mas tome cuidado com o que eu escrevi na minha resposta. Alterar o comportamento padrão de algo geralmente não é muito indicado. Você pode saber como o código funciona hoje, mas daqui alguns meses, quando precisar dar manutenção do projeto, você poderá não lembrar que alterou o comportamento do accordion e ficar confuso. Minha dica: somente o faça se tiver absoluta consciência do que está fazendo.
    – Woss
    10/05/2017 às 2:41

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 .