Ayuda con menu js

Edrien · 22 Mar 2023

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.

Edrien · 22 Mar 2023

@YeltsinReyes alguien?

albert5 · 22 Mar 2023

Pasale tu código a chatgpt o al botbeta.

m16u31 · 22 Mar 2023

<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,

Puko · 22 Mar 2023

m16u31 dijo:
<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

YeltsinReyes · 22 Mar 2023

Edrien dijo:
@YeltsinReyes alguien?

esta online?

Puko · 22 Mar 2023

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;
}

Ayuda con menu js

Edrien

Edrien

albert5

m16u31

Puko

YeltsinReyes

Puko

Temas similares