El usuario preguntó 👇
Hola, me gustaría agregar un botón plegable a mi sitio web con las siguientes funciones (localhost).Aquí puedes verlo en acción):
el ancho del botón no tiene que ser del 100%, pero debe caber dentro del botón el botón se puede insertar en la línea de texto sin forzar las palabras después de que el botón se mueva a la siguiente línea (probé drop-plugin o – matic, pero las palabras después del botón, incluso si están escritas en las mismas líneas, se ven obligadas a pasar a la siguiente línea)
Estaba buscando cómo crear un botón manualmente (sin complementos) y terminé en el sitio web de w3schools donde creé el botón que quiero (ver enlace arriba) con el siguiente código
<!DOCTYPE html>
<html>
<head>
<style>
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
border: none;
}
.ccontent {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: .3s ease-out;
background-color: #f1f1f1;
box-shadow: 5px 5px 10px 3px inset rgba(0,0,0,0.60);
}
</style>
</head>
<body>
Does <button class="collapsible">this</button> works?
<div class="ccontent"><p>Yes!</p></div>
Good job!
<script type="text/javascript">
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
</body>
</html>Luego traté de descubrir cómo agregar código a wordpress, así que eso fue lo que hice.
.Composable y .content agregaron el archivo javascript style.css al pie de página usando el complemento
luego en la publicación escribí el siguiente código
Does <button class="collapsible">this</button> works?
<div class="ccontent"><p>Yes!</p></div>
Good job!pero aunque el botón se muestra correctamente, no sucede nada cuando se hace clic. Como se muestra el botón, creo que el problema está en el código javascript.
SEO Lo que señalé en mi publicación, como puede ver, es que otro problema es el espacio entre la primera y la segunda línea.
Estoy bastante seguro de que el script Java está cargado porque cuando abro el código fuente de la página (CTRL + U) puedo ver el script que se muestra, una línea antes de la etiqueta.
.
Este tema fue modificado hace 1 año, 5 meses. Este tema fue modificado hace 1 año, 5 meses. Este tema fue modificado hace 1 año, 5 meses. Este tema fue modificado hace 1 año, 5 meses.
(@ronaldvw)
hace 1 año, 5 meses
Hola,
cuando revisa la consola de errores del navegador, debe saber qué código no funciona. Sin embargo, este es un poco de código para algo que debería ser muy fácil usando jQuery.
Mirar: https://jsfiddle.net/ronald/b8x123tc/ por ejemplo.
Para agregar código a su sitio de WordPress «de la manera que desee», agregue el siguiente código al final de los temas secundarios functions.php archivo, pero antes de cerrar ?>Como mucho:
function my_footer_script() { ?>
<script type="text/javascript">
jQuery(document).ready(function(){
$('.collapsible').click(function() {
$(this).next().slideToggle();
}).next().hide();
});
</script>
<?php
}
add_action('wp_print_footer_scripts', 'my_footer_script');(@giannit)
hace 1 año, 5 meses
@ronaldvw ¡Muchas gracias! Solucionado el problema principal, se decidió editar la líneavar content = this.nextElementSibling;
envar content = this.parentElement.nextElementSibling;
Ahora estoy tratando de eliminar el espacio en blanco.
Tu solución es muy interesante, agregué el código a functions.php archivo antes de cerrar ?>luego eliminó el CSS a continuación .collapsible Sí .ccontenty por ultimo actualizar la pagina del post, el problema es que una vez cargada la pagina ya se muestra el contenido y no se puede presionar el boton.
También ve este mensaje de error en la consolaUncaught TypeError: $ is not a function y dice que hay un problema $('.collapsible').click(function() {
El mensaje de error está completo.
Uncaught TypeError: $ is not a function ?preview_id=3389&preview_nonce=dd08c156ab&_thumbnail_id=-1&preview=true:190
at HTMLDocument.<anonymous> (?preview_id=3389&preview_nonce=dd08c156ab&_thumbnail_id=-1&preview=true:190)
at i (jquery.js?ver=1.12.4-wp:2)
at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4-wp:2)
at Function.ready (jquery.js?ver=1.12.4-wp:2)
at HTMLDocument.J (jquery.js?ver=1.12.4-wp:2)Esta respuesta fue modificada hace 1 año, 5 meses.
(@ronaldvw)
hace 1 año, 5 meses
Hola,
cambiar la primera línea de código a:
jQuery(document).ready(function($){
de lo contrario, es difícil de diagnosticar sin poder verlo en Internet. Él es Escribí jsfiddle Muestra que el código se ejecuta mientras se carga jQuery.
Esta respuesta fue modificada hace 1 año, 5 meses. Motivo: etiquetas eliminadas del código
(@giannit)
hace 1 año, 5 meses
@ronaldvw Gracias por su apoyo, cambié la primera línea como dijo, pero el error persiste. Traté de intercambiar dos signos de dólar jQueryPor lo tanto
jQuery(document).ready(function(){
jQuery('.collapsible').click(function() {
jQuery(this).next().slideToggle();
}).next().hide();
});los errores desaparecieron pero el botón aún no funciona como se ve en él posicionamiento web video.
(@ronaldvw)
hace 1 año, 5 meses
No puedo depurar el video, avísame cuando tengas algo en línea y puedo ver otro.
(@giannit)
hace 1 año, 5 meses
@ronaldvw ¡Gracias Ronald! ¿Sabe si su método puede poner dos elementos en la misma línea como se muestra? posicionamiento web ¿imagen?
(@giannit)
hace 1 año, 5 meses
Editar: malas noticias
Esta respuesta fue modificada hace 1 año, 5 meses.
¿Eso resolvió tu problema?
