Menú dropdown en Bootstrap 4. Se abre siempre el mismo contenido en el dropdown

Estoy realizando un menú-dropdown en Bootstrap 4 que se abre destrás de cada una de las imagenes.

Este menú lleva texto y unas imagenes con enlace a un formulario.

Pero resulta que todos los dropdowns al clickar, siempre me enseñan el texto del primer dropdown no el que escribo en cada una de las imagenes.

Aquí os paso el trozo de código.

Y no sé como resolverlo.....

Porqué si le asigno un dropdown2 como me sugerias, no se abre el desplegable, directamente me coge el a href y no encuentra la página.

Lo he resumido lo máximo posible, a ver si así se entiende mejor...

<div class="col-6 col-md-2"   style="text-align: center; width: 100%" type="button" id="dropdown1" data-toggle="dropdown"><a href="img_guia_de_empresas"><img src="http://www.laguiaqr.mobi/paginas_nuevas/img/apuntate_a_la_guia.png" class="img-fluid"

          alt="Responsive image" style="img-fluid. width: 100%; text-aling: center; max-height: 200px"></a><h5>Guía de<br>empresas</h5></div>
 

  <div class="dropdown-menu" id="menu1" style="background:url(http://www.laguiaqr.mobi/paginas_nuevas/img/fondo_general_cabecera9.png); background-size: cover;
        text-align: center; width: 94%;padding: 5px 10px; border-radius: 3%;border: 3px solid #f4c730">

			
	
  
	  
<div style="text-align: center; border-radius: 10px;" class="col-12 col-md-8"><h2><b><u>OPCIÓN 1:</u></b></h2>


       
	</div>	
  </div>

<br>	  

		
		  
  
	

<div class="col-6 col-md-2"   style="text-align: center; width: 100%" type="button" id="dropdown1" data-toggle="dropdown"><a href="img_guia_de_empresas"><img src="http://www.laguiaqr.mobi/paginas_nuevas/img/apuntate_a_la_guia.png" class="img-fluid"

          alt="Responsive image" style="img-fluid. width: 100%; text-aling: center; max-height: 200px"></a><h5>Guía de<br>empresas</h5></div>
 

  <div class="dropdown-menu" id="menu1" style="background:url(http://www.laguiaqr.mobi/paginas_nuevas/img/fondo_general_cabecera9.png); background-size: cover;
        text-align: center; width: 94%;padding: 5px 10px; border-radius: 3%;border: 3px solid #f4c730">

			
	
  
	  
<div style="text-align: center; border-radius: 10px;" class="col-12 col-md-8"><h2><b><u>OPCIÓN 2:</u></b></h2>


       
	</div>	
  </div>

<br>

Editar

Responder la pregunta

Jordi

Por favor, simplifica el código, hay mucho ruido. No coloques contenido más que el esencial para que se pueda ver mejor la parte de contenido que importa realmente.

Ya lo he modificado..... por otro lado lo he probado con el a href directo a una imagen y así sí que funciona, el problema es que al ser una image responsive mapeada, cuando la reduce el mapeo no coincide en el móvil.

Respuestas

Yo creo que tu problema es que estás colocando siempre el mismo valor en los atributos data-toggle

data-toggle="dropdown"

Los tienes que asociar al id del dropdown que quieres que se abra realmente. Como tienes siempre "dropdown", siempre iguales, siempre te abre el primero. Deberías colocarlos diferentes, por ejemplo, para abrir el dropdown segundo usas:

data-toggle="dropdown2"

Por favor, tómate la molestia de simplificar tu código para quitarle el contenido que no es esencial para entender el problema mejor. Puedes editar tu pregunta para cambiar el código del HTML que pegaste.

Miguel Angel

3310 147 216 17

Perdona pero soy muy novato....

Se podría decir que es mi primera web y no termino de entender exactamente que me quieres decir...

Pq cuando le asigno un valor al dropdown, o directamente no se vé el contenido, o me lo muestra pero debajo de la imagen no detrás.

Creemé que he probado un montón de opciones pero cuando toco el data-toggle me falla por algún sitio.

Y quiero poner 18 imagenes en total.

No sé si te sirve mi respuesta para poder ayudarme.

Jordi

A ver si así se entiende mejor.....

Una imagen que cuando haces click, se abre una ventana con un texto.

<div class="col-6 col-md-2" style="text-align: center; width: 100%" type="button" id="dropdown1" data-toggle="dropdown"><a href="img_guia_de_empresas"><img src="http://www.laguiaqr.mobi/paginas_nuevas/img/apuntate_a_la_guia.png" class="img-fluid"

          alt="Responsive image" style="img-fluid. width: 100%; text-aling: center; max-height: 200px"></a><h5>Guía de<br>empresas</h5></div>
 

  <div class="dropdown-menu" id="menu1" style="background:url(http://www.laguiaqr.mobi/paginas_nuevas/img/fondo_general_cabecera9.png); background-size: cover;
        text-align: center; width: 94%;padding: 5px 10px; border-radius: 3%;border: 3px solid #f4c730">

			
	
<div class="col-12 col-md-12" style="width:auto;height: auto; text-align: left"><button id="close" onclick="document.getElementById('ms').close()"

      style=" height: auto;font-size: 25px; width: 40px;text-align: center; border-radius:100%"><b>X</b></button>
<div class="row">	  
	  
<div style="text-align: center; border-radius: 10px;" class="col-12 col-md-8"><h2><b><u>OPCIÓN 1:</u></b></h2>
	<h2 style="margin-top: 16px; color: red; text-align: center"><b>AHORRO DE 30 € A LOS 20 PRIMEROS DE CADA SECTOR...</b></h2>
      <h3 style="margin-top: 16px"><b>
	  Exclusiva para clientes que ya dispongan de una pàgina web adaptada a versión móvil y quieran formar parte de nuestro directorio de empresas.

Jordi

Aportar una respuesta