2

Estoy realizando un proyecto de YouTube y estoy creando los botones que aparecen a la par de subir video y tengo dos menus que se mostraran al hacer click en cada uno de ellos, el problema es que al darle click al boton "btn-opc" me muestra el mismo menu que "btn-apps" y quiero que me muestre el otro menu. Aqui esta el codigo de los 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> 

1 respuesta 1

1

Para que cada botón despliegue su respectivo menú, debes poner a cada uno de ellos dentro de un contenedor con la clase "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>

1
  • Muchas gracias amigo el 5 abr. 2018 a las 4:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.