Ajuda com menu JS

Edrien · 22/03/2023

Tengo un menu que deberia desplegarse para abajo pero no se despliega.

este es el html

Inserir CODE, HTML ou 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/03/2023

@YeltsinReyes alguien?

albert5 · 22/03/2023

Pasale tu código a chatgpt o al botbeta.

m16u31 · 22/03/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/03/2023

m16u31 disse:
<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/03/2023

Edrien disse:
@YeltsinReyes alguien?

esta online?

Puko · 22/03/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;
}

Ajuda com menu JS

Edrien

Edrien

albert5

m16u31

Puko

YeltsinReyes

Puko

Tópicos similares