Mi objetivo es mostrar una lista cada vez que se presiona el botón como una lista desplegable, así que hice una especie de prueba de archivos html, css y js y de alguna manera no funciona, la función de registro en mi código js genera la palabra 'year' en la consola, pero el cambio de la lista de clases no parece cambiar / agregar el "activo" en la clase divs.

Debajo está mi js.

function btnFunction(identifier){
console.log(identifier)
var element = document.getElementById(identifier);
element.classList.toggle("active");}

Debajo está mi html.

<div class="modal-content-col-6-drop">
  <button onclick="btnFunction('year')" class="drop-btn">sample</button>
</div>

 <div id="year" class="select">
    <ul>
      <li>0 Year</li>
      <li>1 Year</li>
    </ul>
 </div>

Debajo está mi css.

#year{
  display: none;
}
.active{
  display: block;
}



    
2
IAmGroot0517 26 jul. 2020 a las 14:11

2 respuestas

La mejor respuesta

El css selctor basado en la identificación tiene prioridad sobre uno basado en la clase. Por lo tanto, el año de identificación siempre será display: none incluso si tiene la clase activa. La mejor solución es no usar identificadores para los selectores CSS debido a esto.

Una mejor solución sería

.select{
  display: none;
}
.select.active{
  display: block;
}

Puede leer más sobre la especificidad del selector aquí.

Incluiré un fragmento que muestra esto aquí debajo:

function btnFunction(identifier){
    console.log(identifier)
    var element = document.getElementById(identifier);
    element.classList.toggle("active");
}
.select{
  display: none;
}
.select.active{
  display: block;
}
<html>
<body>
<div class="modal-content-col-6-drop">
  <button onclick="btnFunction('year')" class="drop-btn">sample</button>
</div>

 <div id="year" class="select">
    <ul>
      <li>0 Year</li>
      <li>1 Year</li>
    </ul>
 </div>
 </body>
 </html>
0
Achtung 26 jul. 2020 a las 12:14

Necesitas agregar !important en tu CSS

function btnFunction(identifier) {
  console.log(identifier)
  var element = document.getElementById(identifier);
  element.classList.toggle("active");
}
#year{
  display: none;
}
.active{
  display: block !important;
}
<div class="modal-content-col-6-drop">
  <button onclick="btnFunction('year')" class="drop-btn">sample</button>
</div>

 <div id="year" class="select">
    <ul>
      <li>0 Year</li>
      <li>1 Year</li>
    </ul>
 </div>
0
Mister Jojo 26 jul. 2020 a las 11:28