Bootstrap com navbar, collapse e data-parent

andersonvenancio · 27 de janeiro de 2017

Olá,

Estou utilizando o BOOTSTRAP com NAVBAR e COLLAPSE, consegui fazer funcionar normalmente.

Quando eu clico na "Opção 1" ele mostra o respectivo conteúdo, se eu clicar novamente ele esconde o conteúdo.

Porém o que eu não consegui fazer é que se o conteúdo da "Opção 1" estiver sendo exibido, ao clicar na "Opção 2" ele esconda automaticamente o conteúdo da primeira opção e mostre somente o conteúdo da segunda opção. Ele acaba colocando o conteúdo desta segunda opção abaixo do conteúdo da primeira.

Eu tentei utilizar o DATA-PARENT para relacionar as opções mas não funcionou.

Dei uma olhada na documentação do Bootstrap e fiz algumas pesquisas, mas não achei nenhum exemplo que seja parecido com isto que eu preciso.

Segue o código.

<!DOCTYPE html>
<html lang="pt-BR">

   <head>
      <title>Teste</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-submenu.min.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap-submenu.min.js" defer></script>
      <script>
         $(document).ready(function() {
             $("a.dropdown-toggle").click(function(ev) {
                 $("a.dropdown-toggle").dropdown("toggle");
                 return false;
             });
             $("ul.dropdown-menu a").click(function(ev) {
                 $("a.dropdown-toggle").dropdown("toggle");
                 return false;
             });
             $('[data-submenu]').submenupicker();
         });
      </script>      
   </head>
   
   <body>

      <div class="mix">

         <div class="panel-group" id="options">

            <nav class="navbar navbar-inverse">
               <div class="container-fluid">
                  <div class="navbar-header menuitem">
                     <a class="navbar-brand">TITULO</a>
                     <ul class="nav navbar-nav">
                        <li><a data-toggle="collapse" data-parent="#options" href="#opcao1">Opção 1</a></li>
                        <li><a data-toggle="collapse" data-parent="#options" href="#opcao2">Opção 2</a></li>
                     </ul>
                  </div>
               </div>
            </nav>

            <div id="opcao1" class="container collapse">
               <h3>Opção 1</h3>
               <ul class="nav nav-tabs nav-justified">
                  <li class="active"><a data-toggle="tab" href="#opcao1_tab1"><b>Tab 1</b></a></li>
                  <li><a data-toggle="tab" href="#opcao1_tab2"><b>Tab 2</b></a></li>
               </ul>
               <div class="tab-content">
                  <div id="opcao1_tab1" class="tab-pane fade in active">
                     <table class="table table-content table-condensed table-hover">
                        <thead>
                           <tr>
                              <th>Sequência</th>
                              <th>Data</th>
                              <th>Valor</th>
                           </tr>
                        </thead>
                        <tbody>
                           <tr>
                              <td>1</td>
                              <td>11/03/1996</td>
                              <td>0.00</td>
                           </tr>
                           <tr>
                              <td>2</td>
                              <td>18/03/1996</td>
                              <td>0.00</td>
                           </tr>
                        </tbody>
                     </table>
                     <button type="button" class="btn btn-primary active">Novo - Op1.Tab.1</button>
                     <button type="button" class="btn btn-primary disabled">Alterar - Op1.Tab.1</button>
                  </div>
                  <div id="opcao1_tab2" class="tab-pane fade">
                     <table class="table table-content table-condensed table-hover">
                        <thead>
                           <tr>
                              <th>Sequência</th>
                              <th>Data</th>
                              <th>Valor</th>
                           </tr>
                        </thead>
                        <tbody>
                           <tr>
                              <td>1</td>
                              <td>29/09/2003</td>
                              <td>0.00</td>
                           </tr>
                           <tr>
                              <td>2</td>
                              <td>06/10/2003</td>
                              <td>0.00</td>
                           </tr>
                        </tbody>
                     </table>
                     <button type="button" class="btn btn-primary active">Novo - Op1.Tab.2</button>
                     <button type="button" class="btn btn-primary disabled">Alterar - Op1.Tab.2</button>
                  </div>
               </div>            
            </div>
            
            <div id="opcao2" class="container collapse">
               <h3>Opção 2</h3>
               <ul class="nav nav-tabs nav-justified">
                  <li class="active"><a data-toggle="tab" href="#opcao2_tab1"><b>Tab 1</b></a></li>
                  <li><a data-toggle="tab" href="#opcao2_tab2"><b>Tab 2</b></a></li>
               </ul>
               <div class="tab-content">
                  <div id="opcao2_tab1" class="tab-pane fade in active">
                     <table class="table table-content table-condensed table-hover">
                        <thead>
                           <tr>
                              <th>Sequência</th>
                              <th>Data</th>
                              <th>Valor</th>
                           </tr>
                        </thead>
                        <tbody>
                           <tr>
                              <td>1</td>
                              <td>11/03/1996</td>
                              <td>0.00</td>
                           </tr>
                        </tbody>
                     </table>
                     <button type="button" class="btn btn-primary active">Novo - Op2.Tab.1</button>
                     <button type="button" class="btn btn-primary disabled">Alterar - Op2.Tab.1</button>
                  </div>
                  <div id="opcao2_tab2" class="tab-pane fade">
                     <table class="table table-content table-condensed table-hover">
                        <thead>
                           <tr>
                              <th>Sequência</th>
                              <th>Data</th>
                              <th>Valor</th>
                           </tr>
                        </thead>
                        <tbody>
                           <tr>
                              <td>1</td>
                              <td>29/09/2003</td>
                              <td>0.00</td>
                           </tr>
                        </tbody>
                     </table>
                     <button type="button" class="btn btn-primary active">Novo - Op2.Tab.2</button>
                     <button type="button" class="btn btn-primary disabled">Alterar - Op2.Tab.2</button>
                  </div>
               </div>            
            </div>
            
         </div>
      
      </div>

   </body>
   
</html>

joseph_dev · 27 de janeiro de 2017

Opa!

Tenta isso:

$(document).ready(function() {
  $("ul li a").click(function(ev) {
    $(".collapse").collapse('hide');
  });
});

Isso vai esconder todo elemento collapse da pagina ao clicar.

andersonvenancio · 27 de janeiro de 2017

Obrigado, funcionou como eu precisava!!

:thumbsup:

joseph_dev · 27 de janeiro de 2017

Mudei uma coisa para ficar mais especifico ao elemento que você estiver trabalhando e não interferir em outros caso existam mais elementos que sejam collapse na pagina.

Defina o selector com o id da div onde está os elementos (usei como exemplo "meuPainel"):

$(document).ready(function() {
  $("[id='meuPainel'] ul li a").click(function(ev) {
    $(".collapse").collapse('hide');
  });
});

E não esqueça de colocar o id nessa div:

<div id="meuPainel" class="mix">
  ...

Desse jeito fica mais especifico para o painel que você estiver clicando.

DiF · 27 de janeiro de 2017

@andersonvenancio

Só para complementar, você está colocando um parâmetro dentro da função parâmetro de click mas não está usando ele.

No seu código você colocou o return false no final.

Se quiser deixar mais elegante, retire o return false e adicione a seguinte linha:

ev.preventDefault();

$(document).ready(function() {
  $("#meuPainel ul li a").click(function(ev) {
     ev.preventDefault();
    $(".collapse").collapse('hide');
  });
});