How to dropdown-menu by buttons independently

Question

I have two dropdown-menu and need to access your information separately, for example: by clicking on the first display your options and likewise the second, I made the following attempt using the 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> 

See the image, then click on the first button, the options of the two dropdown-menu are displayed and the attempt to separate the calls using data-target didn’t work out, look at the picture:

Answer 1

If the 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>
<link href="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>

<div class="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>