How to trigger dropdown-menu by buttons independently

Navigation
0

I have two dropdown-menus and I need to access their information separately, for example: clicking on the first display their options and likewise the second, I made the following attempt using data-target but the menus are inaccessible. What I did was this: 

        <div class='btn-group'>          
      <button class='btn btn-large' type='button' title='Marcar/Desmarcar todos' id='todos' onclick='marcardesmarcar();'><i class='icon-large  icon-ok'></i></button>
      <div class="btn-group">
        <button class="btn dropdown-toggle btn-large" data-toggle="dropdown" data-target="#MenuUm" type="button" title="Imprimir"><i class="icon-large icon-print"></i></button>
        <ul class="dropdown-menu" id="MenuUm">
          <li><a href="javascript:imprimeTodos();">Imprimir Fichas Completas Selecionadas</a></li>
          <li><a href="javascript:imprimiItemFichaCadastralIndividual();">Imprimir Fichas Cadastral</a></li>
          <li><a href="javascript:imprimiFichaMedicaIndividual();">Imprimir Fichas Médicas</a></li>
          <li><a href="javascript:imprimiAfericaoMedicaIndividual();">Imprimir Aferi&ccedil;&atilde;o M&eacute;dicas</a></li>
          <li><a href="javascript:imprimiItemFichaEscolarIndividual();">Imprimir Item Ficha Escolar</a></li>
          <li><a href="javascript:imprimeLista();">Imprimir Listagem das Fichas</a></li>
          <li><a href="javascript:imprimeFichaAlunoEscola();">Imprimir Listagem Alunos x Escola</a></li>
        </ul>
        <button class="btn dropdown-toggle btn-large" data-toggle="dropdown" data-target="#MenuDois" type="button" title="Exportar"><i class="icon-large icon-file-export"></i></button>
        <ul class="dropdown-menu" id="MenuDois">
          <li><a href="javascript:imprimeFichaAlunoEscola();">Imprimir Listagem Alunos x Escola</a></li>
        </ul>
      </div>
    </div>

Look at the image, click on the first button, the options of the two dropdown-menus are displayed and the attempt to separate the calls using data-target did not work, see the image:

    
asked by anonymous 15.12.2015 / 18:53

1 answer

1

If data-target is not required for use, you can try using the following example: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script><divclass="container">
  
  <div class="btn-group">
    
    <button type="button" class="btn btn-default">
      <i class="glyphicon glyphicon-flash"> Marcar/Desmarcar todos</i>
    </button>
    
    <div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <i class="glyphicon glyphicon-plus-sign"> Imprimir</i> <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="javascript:imprimeTodos();">Imprimir Fichas Completas Selecionadas</a></li>
      <li><a href="javascript:imprimiItemFichaCadastralIndividual();">Imprimir Fichas Cadastral</a></li>
      <li><a href="javascript:imprimiFichaMedicaIndividual();">Imprimir Fichas Médicas</a></li>
      <li><a href="javascript:imprimiAfericaoMedicaIndividual();">Imprimir Aferi&ccedil;&atilde;o M&eacute;dicas</a></li>
      <li><a href="javascript:imprimiItemFichaEscolarIndividual();">Imprimir Item Ficha Escolar</a></li>
      <li><a href="javascript:imprimeLista();">Imprimir Listagem das Fichas</a></li>
      <li><a href="javascript:imprimeFichaAlunoEscola();">Imprimir Listagem Alunos x Escola</a></li>
      </ul>
  	</div>
    
    <div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <i class="glyphicon glyphicon-cog"> Exportar</i> <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="javascript:imprimeFichaAlunoEscola();">Imprimir Listagem Alunos x Escola</a></li>
      </ul>
    </div>  
    
  </div>  
  
</div>
    
15.12.2015 / 19:38
Send textarea text to div Java - Scrollable Menu