Pregunta sobre Arreglando WordPress de Wordpress:

El botón consumible no falla … ¡gota!

Un usuario preguntó 👇

Hola, me gustaría agregar un botón plegable con las siguientes características a mi sitio (localhost).Aquí puedes verlo en acción):

el ancho del botón no tiene que ser 100%, pero debe caber el texto dentro del botón botón se puede insertar en una línea de texto sin forzar las palabras después de que el botón pasa a la siguiente línea (probé el drop- plugin o-matic pero las palabras después del botón, incluso si están escritas en la misma línea, se ven obligadas a ir a la siguiente línea)

Estaba buscando cómo crear el botón manualmente (sin plugins) y terminé en la página de w3schools donde creé el botón que quiero (ver enlace arriba) usando 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 averiguar cómo agregar el código a wordpress, así que esto es lo que hice

.Collapsible y .content agregaron el archivo javascript style.css al pie de página usando un plugin

luego en una 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 ocurre nada cuando se hace clic en él. Dado que se muestra el botón, creo que el problema está relacionado con el código javascript.
SEO lo que señaló en mi publicación, como pueden ver, es otro problema es el espacio en blanco entre la primera línea y la segunda.

Estoy bastante seguro de que el javascript está cargado porque cuando abro el código fuente de la página (CTRL + U) veo que se muestra el script, 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, debería decirle qué código está fallando. Sin embargo, este es un pequeño código para algo que debería ser realmente simple usando jQuery.

Mira: https://jsfiddle.net/ronald/b8x123tc/ por ejemplo.

Para agregar el código a su sitio de WordPress «de la manera correcta», agregue el siguiente código al final de los temas de su hijo functions.php archivo, pero antes de cerrar ?>, Si alguna:

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! He resuelto el problema principal, se decidió editar la línea
var content = this.nextElementSibling;
en
var content = this.parentElement.nextElementSibling;

Ahora estoy tratando de eliminar el espacio en blanco.

Su solución es muy interesante, agregué el código al functions.php archivo antes de cerrar ?>, luego eliminé el código CSS debajo de él .collapsible y .ccontent, y finalmente actualice la página de publicación, el problema es que cuando se carga la página, el contenido ya se muestra y no se puede presionar el botón.

Además, en la consola este mensaje de error es visible
Uncaught TypeError: $ is not a function y dice que el problema viene $('.collapsible').click(function() {

Un 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,

cambie la primera línea del código a:

jQuery(document).ready(function($){

de lo contrario, esto es difícil de diagnosticar sin poder verlo en línea. El es jsfiddle publiqué Muestra que el código funciona, siempre que se cargue 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 el apoyo, cambié la primera línea como dijiste, pero el error no desapareció. Traté de reemplazar los dos signos de dólar jQuery, De este modo

        jQuery(document).ready(function(){
            jQuery('.collapsible').click(function() {
                jQuery(this).next().slideToggle();
            }).next().hide();
        });

los errores han desaparecido, pero el botón aún no funciona como puede ver en él seo vídeo.

(@ronaldvw)

Hace 1 año, 5 meses

No puedo depurar un video, avíseme cuando tenga algo en línea y puedo ver otro.

(@giannit)

Hace 1 año, 5 meses

@ronaldvw ¡Gracias ronald! ¿Sabe si es posible, utilizando su método, colocar dos elementos en la misma línea, como se muestra? seo ¿imagen?

(@giannit)

Hace 1 año, 5 meses

Editar: mensaje incorrecto

Esta respuesta fue modificada hace 1 año, 5 meses.

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *