How to specify the menu that would display the button with Dropdown class of Bootstrap?

Navigation
2

I'm doing a YouTube project and I'm creating the buttons that appear when I upload the video and I have two menus that will be shown when I click on each of them, the problem is that by clicking on the "btn-" button opc "shows me the same menu as" btn-apps "and I want you to show me the other menu. Here is the code of the menus. 

<button class="btn btn-light btn-circle end-btn" type="button" id="btn-apps" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Apps de Youtube">
    <i class="fas fa-th fa-lg"></i>
</button>
<!-- Menu de dropdown de las apps de YouTube-->
<div class="dropdown-menu" aria-labelledby="btn-apps">
  <a class="dropdown-item d-block p-0 pt-2 pb-1" href="#">
    <div class="pl-2 pr-4">
      <img src="img\assets\yt-tv.png" class=" ml-2 mr-3"> YouTube TV
    </div>
  </a>
  <a class="dropdown-item d-block p-0 pt-2 pb-1" href="#">
    <div class="pl-2 pr-4">
      <img src="img\assets\yt-gaming.png" class=" ml-2 mr-3"> YouTube Gaming
    </div>
  </a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item d-block p-0 pt-2 pb-1" href="#">
    <div class="pl-2 pr-4">
      <img src="img\assets\yt-music.png" class=" ml-2 mr-3"> YouTube Music
    </div>
  </a>
  <a class="dropdown-item d-block p-0 pt-2 pb-1" href="#">
    <div class="pl-2 pr-4">
      <img src="img\assets\yt-kids.png" class=" ml-2 mr-3"> YouTube Kids
    </div>
  </a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item d-block p-0 pt-2 pb-1" href="#">
    <div class="pl-2 pr-4">
      <img src="img\assets\yt-icon.png" class=" ml-2 mr-3"> Academia de Creadores
    </div>
  </a>
  <a class="dropdown-item d-block p-0 pt-2 pb-1" href="#">
    <div class="pl-2 pr-4">
      <img src="img\assets\yt-icon.png" class=" ml-2 mr-3"> Youtube para Artistas
    </div>
  </a>
</div>
<button class="btn btn-light btn-circle end-btn" type="button" id="btn-opc" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Configruacion">
  <i class="fas fa-ellipsis-v fa-lg"></i>
</button>
<!--Menu dropdown de las configuraciones de YT-->
<div class="dropdown-menu p-2" aria-labelledby="btn-opc">
  <a class="dropdown-item d-block p-0 pt-2 pb-1" href="#">
    <div class="pl-2 pr-4">
      <i class="fas fa-cog fa-lg ml-2 mr-3"></i> Configuracion
    </div>
  </a>
  <a class="dropdown-item d-block p-0 pt-2 pb-1" href="#">
    <div class="pl-2 pr-4">
      <i class="fas fa-question-circle fa-lg ml-2 mr-3"></i> Ayuda
    </div>
  </a>
  <a class="dropdown-item d-block p-0 pt-2 pb-1" href="#">
    <div class="pl-2 pr-4">
      <i class="fas fa-comment fa-lg ml-2 mr-3"></i> Enviar comentarios
    </div>
  </a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item d-block p-0 pt-2 pb-1 dropright" href="#">
    <div class="pl-2 pr-4 dropdown-toggle">
      Idioma: Español
    </div>
  </a>
  <a class="dropdown-item d-block p-0 pt-2 pb-1 dropright" href="#">
    <div class="pl-2 pr-4 dropdown-toggle">
      Ubicacion: Estados Unidos
    </div>
  </a>
  <a class="dropdown-item d-block p-0 pt-2 pb-1 dropright" href="#">
    <div class="pl-2 pr-4 dropdown-toggle">
      Modo Restringido: Desactivado
    </div>
  </a>
</div>
    
asked by Angel Bulnes 05.04.2018 в 05:14
source

1 answer

1

For each button to display its respective menu, you must put each of them inside a container with the class "dropdown": 

<div class="dropdown">
  --botón 1 y menú 1--
</div>

<div class="dropdown">
  --botón 2 y menú 2--
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
<button class="btn btn-light btn-circle end-btn" type="button" id="btn-apps" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Apps de Youtube">
    <i class="fas fa-th fa-lg"></i>
</button>
<!-- Menu de dropdown de las apps de YouTube-->
<div class="dropdown-menu" aria-labelledby="btn-apps">
  <a class="dropdown-item d-block p-0 pt-2 pb-1" href="#">
    <div class="pl-2 pr-4">
      <img src="img\assets\yt-tv.png" class=" ml-2 mr-3"> YouTube TV
    </div>
  </a>
  <a class="dropdown-item d-block p-0 pt-2 pb-1" href="#">
    <div class="pl-2 pr-4">
      <img src="img\assets\yt-gaming.png" class=" ml-2 mr-3"> YouTube Gaming
    </div>
  </a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item d-block p-0 pt-2 pb-1" href="#">
    <div class="pl-2 pr-4">
      <img src="img\assets\yt-music.png" class=" ml-2 mr-3"> YouTube Music
    </div>
  </a>
  <a class="dropdown-item d-block p-0 pt-2 pb-1" href="#">
    <div class="pl-2 pr-4">
      <img src="img\assets\yt-kids.png" class=" ml-2 mr-3"> YouTube Kids
    </div>
  </a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item d-block p-0 pt-2 pb-1" href="#">
    <div class="pl-2 pr-4">
      <img src="img\assets\yt-icon.png" class=" ml-2 mr-3"> Academia de Creadores
    </div>
  </a>
  <a class="dropdown-item d-block p-0 pt-2 pb-1" href="#">
    <div class="pl-2 pr-4">
      <img src="img\assets\yt-icon.png" class=" ml-2 mr-3"> Youtube para Artistas
    </div>
  </a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-light btn-circle end-btn" type="button" id="btn-opc" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Configruacion">
  <i class="fas fa-ellipsis-v fa-lg"></i>
</button>
<!--Menu dropdown de las configuraciones de YT-->
<div class="dropdown-menu p-2" aria-labelledby="btn-opc">
  <a class="dropdown-item d-block p-0 pt-2 pb-1" href="#">
    <div class="pl-2 pr-4">
      <i class="fas fa-cog fa-lg ml-2 mr-3"></i> Configuracion
    </div>
  </a>
  <a class="dropdown-item d-block p-0 pt-2 pb-1" href="#">
    <div class="pl-2 pr-4">
      <i class="fas fa-question-circle fa-lg ml-2 mr-3"></i> Ayuda
    </div>
  </a>
  <a class="dropdown-item d-block p-0 pt-2 pb-1" href="#">
    <div class="pl-2 pr-4">
      <i class="fas fa-comment fa-lg ml-2 mr-3"></i> Enviar comentarios
    </div>
  </a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item d-block p-0 pt-2 pb-1 dropright" href="#">
    <div class="pl-2 pr-4 dropdown-toggle">
      Idioma: Español
    </div>
  </a>
  <a class="dropdown-item d-block p-0 pt-2 pb-1 dropright" href="#">
    <div class="pl-2 pr-4 dropdown-toggle">
      Ubicacion: Estados Unidos
    </div>
  </a>
  <a class="dropdown-item d-block p-0 pt-2 pb-1 dropright" href="#">
    <div class="pl-2 pr-4 dropdown-toggle">
      Modo Restringido: Desactivado
    </div>
  </a>
</div>
</div>
    
answered by 05.04.2018 / 06:33
source
Popover with Bootstrap Use of delegates in C #