Ayuda con menu js

  • Autor Autor Edrien
  • Fecha de inicio Fecha de inicio
Edrien

Edrien

Lambda
Verificación en dos pasos activada
Verificado por Whatsapp
Tengo un menu que deberia desplegarse para abajo pero no se despliega.

este es el html


Insertar CODE, HTML o PHP:
<div class="mr-2 ml-2 flex-grow">
                      <div data-v-615991ff="" class="md-select focus:outline-none md-select--populated" tabindex="0">
                        <div data-v-615991ff="" class="md-select-inner-wrap rounded cursor-pointer block" style="min-width: 0px;">
                          <div data-v-615991ff="" class="md-select__border"></div>
                          <div data-v-615991ff="" class="flex-grow relative py-[0.3125rem]">
                            <div data-v-615991ff="" class="mb-1 text-xs h-4"></div>
                            <div data-v-615991ff="" class="absolute top-4 transition-label populated">Capitulos
                              <!---->
                            </div>
                            <div data-v-615991ff="" class="placeholder-text with-label populated" style="min-height: 1em;">
                              <!----> Capitulo 8</div>
                          </div><svg data-v-58fcffdf="" data-v-615991ff="" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-chevron-down icon text-icon-contrast text-undefined chevron ml-1 flex-shrink-0 my-4" viewBox="0 0 24 24">
                            <path d="m6 9 6 6 6-6"></path>
                          </svg>
                        </div>
                        <div data-v-615991ff="" class="fixed overflow-y-auto overscroll-contain z-10 bg-accent shadow rounded-b" style="display: none;">
                         
                       
                       

                                                <div data-v-615991ff="" href="http://localhost/dorama/joven-criada/10" class="px-4 py-2 hover:bg-accent-darken active:bg-accent-darken cursor-pointer" tabindex="-1" role="option">
                            <!----> '.$chapter-&gt;chapter_number.'</div>
                                                    <div data-v-615991ff="" href="http://localhost/dorama/joven-criada/9" class="px-4 py-2 hover:bg-accent-darken active:bg-accent-darken cursor-pointer" tabindex="-1" role="option">
                            <!----> '.$chapter-&gt;chapter_number.'</div>
                                                    <div data-v-615991ff="" href="http://localhost/dorama/joven-criada/8" class="px-4 py-2 hover:bg-accent-darken active:bg-accent-darken cursor-pointer" tabindex="-1" role="option">
                            <!----> '.$chapter-&gt;chapter_number.'</div>
                                                    <div data-v-615991ff="" href="http://localhost/dorama/joven-criada/7" class="px-4 py-2 hover:bg-accent-darken active:bg-accent-darken cursor-pointer" tabindex="-1" role="option">
                            <!----> '.$chapter-&gt;chapter_number.'</div>
                                                    <div data-v-615991ff="" href="http://localhost/dorama/joven-criada/6" class="px-4 py-2 hover:bg-accent-darken active:bg-accent-darken cursor-pointer" tabindex="-1" role="option">
                            <!----> '.$chapter-&gt;chapter_number.'</div>
                                                    <div data-v-615991ff="" href="http://localhost/dorama/joven-criada/5" class="px-4 py-2 hover:bg-accent-darken active:bg-accent-darken cursor-pointer" tabindex="-1" role="option">
                            <!----> '.$chapter-&gt;chapter_number.'</div>
                                                    <div data-v-615991ff="" href="http://localhost/dorama/joven-criada/4" class="px-4 py-2 hover:bg-accent-darken active:bg-accent-darken cursor-pointer" tabindex="-1" role="option">
                            <!----> '.$chapter-&gt;chapter_number.'</div>
                                                    <div data-v-615991ff="" href="http://localhost/dorama/joven-criada/3" class="px-4 py-2 hover:bg-accent-darken active:bg-accent-darken cursor-pointer" tabindex="-1" role="option">
                            <!----> '.$chapter-&gt;chapter_number.'</div>
                                                    <div data-v-615991ff="" href="http://localhost/dorama/joven-criada/2" class="px-4 py-2 hover:bg-accent-darken active:bg-accent-darken cursor-pointer" tabindex="-1" role="option">
                            <!----> '.$chapter-&gt;chapter_number.'</div>
                                                    <div data-v-615991ff="" href="http://localhost/dorama/joven-criada/1" class="px-4 py-2 hover:bg-accent-darken active:bg-accent-darken cursor-pointer" tabindex="-1" role="option">
                            <!----> '.$chapter-&gt;chapter_number.'</div>
                           
                        </div>
                        <!---->
                      </div>
                    </div>


Debería verse así pero actualmente no se despliega, apreciaría si me podrían ayudar con su JS o CSS para que pueda únicamente se desplegarse hacia abajo.


ccccc.webp
 
Pasale tu código a chatgpt o al botbeta.
 
<div data-v-615991ff="" class="fixed overflow-y-auto overscroll-contain z-10 bg-accent shadow rounded-b" style="display: none;">
style="display: none;" haz algo para quitar ese atributo, por eso no se ve. Solo es eso,
 
<div data-v-615991ff="" class="fixed overflow-y-auto overscroll-contain z-10 bg-accent shadow rounded-b" style="display: none;">
style="display: none;" haz algo para quitar ese atributo, por eso no se ve. Solo es eso,
Asi es html con el display none, tiene de seguro en el script que al hacerle click o al pasar el puntero (css hover) quite ese display y se despliegue.

O lo copio asi con el style en inpeccionar sin tomar en cuenta que el script o css hover lo cambia
 
Con lo que pusiste y no se si le afecte en los demas css (class) si le pones el css original ... asi abre el submenu

Al div oculto le quitas -> style="display: none;"
Al div principal le agregas la class por ejemplo -> dropdownxx
Al div oculto le agregas la class -> dropdown-contentxx

.dropdownxx {
display: block;
position: relative;
}
.dropdown-contentxx {
display: none;
position: absolute;
}
.dropdownxx:hover .dropdown-contentxx {
display: block;
}

 
Última edición:
Atrás
Arriba