Estoy tratando de hacer un li plegable, así que quiero mostrar un párrafo al hacer clic en el li (índice). Busqué durante un tiempo y descubrí que puede apuntar al li usando la función onClick y logré ocultar el párrafo, pero después de hacer clic de nuevo en el li (índice), el párrafo ya no se muestra. ¿Hay alguien que pueda ayudarme?
function myfunction(li) { var TextInsideLi = li.getElementsByTagName('p')[0]; if (TextInsideLi.style.display = "block") { TextInsideLi.style.display = "none"; } else { TextInsideLi.style.display = "block"; } } <ul class="questions" id="myList"> <li class="question" onclick="myfunction(this)"> <div class="question-header"> <a>What types of licenses are included?</a> <i class="fas fa-plus"></i> <i class="fas fa-minus"></i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </li> <li class="question" onclick="myfunction(this)"> <div class="question-header"> <a>What types of licenses are included?</a> <i class="fas fa-plus"></i> <i class="fas fa-minus"></i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </li> </ul>La respuesta anterior solo funciona con el segundo clic de li , la respuesta a continuación funciona con el primer clic.
Estaba haciendo una asignación anteriormente en la declaración if , necesita usar == u otro operador de comparación en lugar de un operador de asignación.
También compruebo si la pantalla no es ninguna en lugar de si está bloqueada, ya que inicialmente no tiene bloqueo ni ninguno.
function myfunction(li) { var TextInsideLi = li.getElementsByTagName('p')[0]; console.log("click"); if (TextInsideLi.style.display !== "none") { TextInsideLi.style.display = "none"; } else { TextInsideLi.style.display = "block"; } } <ul class="questions" id="myList"> <li class="question" onclick="myfunction(this)"> <div class="question-header"> <a>What types of licenses are included?</a> <i class="fas fa-plus"></i> <i class="fas fa-minus"></i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </li> <li class="question" onclick="myfunction(this)"> <div class="question-header"> <a>What types of licenses are included?</a> <i class="fas fa-plus"></i> <i class="fas fa-minus"></i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </li> </ul>Está asignando en lugar de comparar :
if(TextInsideLi.style.display = "block")debe ser
if(TextInsideLi.style.display === "block") Además, en el clic inicial, su elemento p no tiene ningún estilo en línea (que element.style verifica solo ). Es por eso que en una de las respuestas inicialmente hay que hacer clic dos veces.
Le sugiero que trabaje con la API hidden universal existente en su lugar.
Además de evitar los estilos en línea, también debe intentar evitar los detectores de eventos en línea como onclick="..." . En su lugar, trabaje con addEventListener .
const questions = document.querySelectorAll('li.question'); for (const question of questions) { question.addEventListener('click', () => { const pElement = question.querySelector('p:last-child'); pElement.hidden = !pElement.hidden; // toggles el.hidden }); } <ul class="questions" id="myList"> <li class="question" onclick="myfunction(this)"> <div class="question-header"> <a>What types of licenses are included?</a> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </li> <li class="question" onclick="myfunction(this)"> <div class="question-header"> <a>What types of licenses are included?</a> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </li> </ul>Tienes que agregar una comparación en lugar de la asignación '='
if (TextInsideLi.style.display === "block")