Tengo el siguiente html con estilo css y js:
<p>This is a text <br /> <a ref="##" onclick="showHideBlocks('i1', 'i2')"> <span id="i1" class="show">(show more)</span> </a> </p> <p id="i2" class="hidden">This is hidden text <br /> <a ref="##" onclick="showHideBlocks('i1', 'i2')">(hide me) </a> </p>y mi css:
.show { display: block; } .hidden { display: none; }En la vista web: esto se muestra así como se esperaba.
This is a text (show more)y aquí está la función js:
function showHideBlock(id) { var e = document.getElementById(id); var display = e.style.display; console.log(typeof display) console.log(display) if (display === 'block') { display = 'none'; } else { display = 'block'; } e.style.display = display; } function showHideBlocks(id1, id2) { showHideBlock(id1); showHideBlock(id2); }La primera vez, hago clic en "(mostrar más)", se muestra el bloque oculto, parcialmente como se esperaba:
This is text (show more) This is hidden text (hide me)Sin embargo, el texto "(mostrar más)" todavía se muestra, ¡se espera que esté oculto! Esto se espera:
This is text This is hidden text (hide me)Luego, hago clic en "(ocultarme)", el texto "(mostrar más)" y el siguiente párrafo están todos ocultos. Eso significa que las llamadas subsiguientes están funcionando (ya que la pantalla se asigna mediante la cadena 'bloquear' o 'ninguno').
This is textHe agregado un mensaje de registro a la función js. Noté que por primera vez, la visualización es de tipo cadena pero el valor está vacío (la segunda línea debe estar vacía, uso "" para enfatizar el vacío)
string ""¿Cómo puedo obtener su propiedad como "bloque" o "ninguno" por primera vez?
Gracias @AnhPC03 por la corrección. Pero el problema sigue siendo el mismo. He actualizado los códigos en la pregunta. En realidad, los códigos anteriores se simplifican a partir de mi proyecto.
ACTUALIZADO
Después de que el autor edite su publicación.
Porque en el primer bloque, tienes class en lugar de style="display: block;" en su span , por lo que debe verificar si la propiedad de display se presenta o no. De lo contrario, obtenga la propiedad de esa clase en el archivo css usando el método getComputedStyle .
function showHideBlock(id) { var e = document.getElementById(id); var display = e.style.display; if (display === "") { let style = getComputedStyle(e); display = style.display; } if (display === 'block') { display = 'none'; } else { display = 'block'; } e.style.display = display; } function showHideBlocks(id1, id2) { showHideBlock(id1); showHideBlock(id2); }Sugeriría alternar una class . He ajustado su código para mostrar cómo puede hacer esto de manera simple.
function showHideBlock(id) { var e = document.getElementById(id); if (e.classList.contains("hidden")) { e.classList.remove("hidden"); } else { e.classList.add("hidden"); } } function showHideBlocks(id1, id2) { showHideBlock(id1); showHideBlock(id2); } .hidden { display: none; } <p>This is a text <br /> <a ref="##" onclick="showHideBlocks('i1', 'i2')"> <span id="i1" class="show">(show more)</span> </a> </p> <p id="i2" class="hidden">This is hidden text <br /> <a ref="##" onclick="showHideBlocks('i1', 'i2')">(hide me) </a> </p>Aquí tienes con la Solución 1
function showHideBlock(id) { var e = document.getElementById(id); if (e.classList.contains("show")) { e.classList.remove("show"); e.classList.add("hidden"); } else { e.classList.remove("hidden"); e.classList.add("show"); } } function showHideBlocks(id1, id2) { showHideBlock(id1); showHideBlock(id2); } .show { display: block; } .hidden{ display: none; } <p>This is a text <br /> <a ref="##" onclick="showHideBlocks('i1', 'i2')"> <span id="i1" class="show"> (show more) </span> </a></p> <p id="i2" class="hidden">This is hidden text<br /> <a ref="##" onclick="showHideBlocks('i1', 'i2')">(hide me)</a></p> <p> Another test with inline style. </p> <p>This is a text <br /> <a ref="##" onclick="showHideBlocks('i3', 'i4')"> <span id="i3" class="show"> (show more) </span> </a></p> <p id="i4" class="hidden">This is hidden text<br /> <a ref="##" onclick="showHideBlocks('i3', 'i4')">(hide me)</a></p>Aquí tienes la solución 2
function showHideBlock(id) { document.getElementById(id).classList.toggle("hidden") } function showHideBlocks(id1, id2) { showHideBlock(id1); showHideBlock(id2); } .hidden{ display: none; } <p>This is a text <br /> <a ref="##" onclick="showHideBlocks('i1', 'i2')"> <span id="i1"> (show more) </span> </a></p> <p id="i2" class="hidden">This is hidden text<br /> <a ref="##" onclick="showHideBlocks('i1', 'i2')">(hide me)</a></p> <p> Another test with inline style. </p> <p>This is a text <br /> <a ref="##" onclick="showHideBlocks('i3', 'i4')"> <span id="i3"> (show more) </span> </a></p> <p id="i4" class="hidden">This is hidden text<br /> <a ref="##" onclick="showHideBlocks('i3', 'i4')">(hide me)</a></p>