qué opción entre las siguientes es mejor o se usa como una forma estándar de mostrar/ocultar los elementos html
PD: esta pregunta de elemento para ocultar/mostrar JavaScript usa la primera opción mencionada (cambia el estilo a bloquear para mostrar lo que puede no ser deseado). Me gustaría saber si este método se usa en la mayoría de los sitios web o para agregar/eliminar una clase separada o de cualquier otra manera.
Prefiero alternar una clase usando DOMTokenList.toggle() :
El método
toggle()de la interfaz DOMTokenList elimina un token determinado de la lista y devuelve falso. Si el token no existe, se agrega y la función devuelve verdadero.
La opción 1 sería estándar solo para ocultar el elemento, pero si desea agregar otros estilos como transiciones y eventos de puntero, se prefiere la opción 2
Bueno, excepto la primera y la segunda, existe la otra manera. Lo cual es representar el elemento en sí mismo.
Tiene una mejor seguridad. ya que el usuario no sabrá si hay un elemento oculto dentro del div de alternancia. Por ejemplo, cuando la gente intenta mirar el html
Echa un vistazo a continuación
Usé jQuery porque es más fácil de escribir. Si no puede volver a escribir una versión de JavaScript, estaremos encantados de volver a escribir por usted.
var items = $(".toggle"); var item = {}; // setup the auto toggle $(".toggle").each(function(el) { var id = new Date().getUTCMilliseconds() + $(this).index() item[id] = $(this).find("content") if (!$(this).hasClass("show")){ $(this).find("content").remove(); } $(this).attr("id", id) }); $(".toggle").click(function() { if ($(this).find("content").length > 0) $(this).find("content").remove(); else $(this).append(item[$(this).attr("id")]) }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="toggle"> <h1>click here to toggle content </h1> <content> this is a test </content> </div> <div class="toggle show"> <h1>click here to toggle content(start state is visible) </h1> <content> this is a test </content> </div>