cómo decirle a mi código jquery simple que active el clic en mi .filter_btn
solo cuando estoy en un móvil o tableta (ancho máximo: 768 px)
y no en un escritorio?
<script> document.addEventListener('DOMContentLoaded', function() { jQuery(function($){ $('.filter_btn').click(function(event){ $('.content_filter').slideToggle('250','swing','hide'); }); }); }); </script> <style> @media all and (max-width: 768px) { .content_filter { display:none; } } </style>como puede ver aquí, puedo hacer clic en modo de escritorio
Puede validar el ancho de la ventana usando la propiedad window.innerWidth. Algo como:
<script> document.addEventListener('DOMContentLoaded', function() { jQuery(function($){ $('.filter_btn').click(function(event){ //Here we validate the size of the window, I've had this act wonky //before, so you may have to adjust the value if(window.innerWidth <= 768) { $('.content_filter').slideToggle('250','swing','hide'); } }); }); }); </script>Ya tiene una consulta de medios configurada para ocultar contenido sobre el tamaño de pantalla especificado, pero está ocultando el filtro .content. Si no desea que se haga clic en .filter_btn, ocúltelo.
Si aún desea que el encabezado sea visible, tenga dos versiones del encabezado: una que se muestra para pantallas pequeñas en las que se puede hacer clic y otra que se muestra en pantallas grandes y no se puede hacer clic.