在响应式设计中用 CSS 覆盖 JQuery 函数 [英] Override JQuery function with CSS in responsive design

问题描述

我在我的网站上遇到了一个小障碍.在移动版本 (<480px) 中，我有一个用于评论的切换按钮.>480px 版本，按钮隐藏，我想一直显示评论.它是一种响应式设计，因此在调整大小时它是相同的页面.我该怎么做?

I ran into a little obstacle in my site. In the mobile version (<480px), I have a toggle button for comments. >480px version, the button is hidden, and I want to always show the comments. It is a responsive design so it is the same page when resized. How can I do that?

$(document).ready(function(){
  $('#comments-container').addClass('mobile-hide');

   $('#show-comments').click(function()
   {
      $('#comments-container').filter(':not(:animated)').slideToggle();
   });
});

.mobile-hide 就是 display: none;.当我将内容切换为显示然后隐藏，并将浏览器的大小调整为 >480px 时，内容保持隐藏.我试图设置 .mobile-hide { display: block;} 用于 >480px 样式表，但它不起作用.

.mobile-hide is just display: none;. When I toggle the content to show then hide, and resize the browser to >480px, the content remains hidden. I've tried to set .mobile-hide { display: block; } for the >480px stylesheet, but it doesn't work.

推荐答案

您是否考虑过在 CSS 中使用媒体查询来实现这一目标?听起来你不需要为此使用JS，但我有点不清楚.例如:

Have you considered using media queries in CSS to achieve this? It sounds like you don't need to use JS for this but I am a little unclear. For example:

#comment-button {display:block;}

@media only screen and (max-device-width: 480px) {
  #comment-button {display:none;}
}

要侦听浏览器宽度，您可以设置滴答事件(使用 setInterval 每 x 秒发生一次)或使用调整大小事件:

To listen for browser width you can either set a tick event (happens every x seconds with setInterval) or use the resize event:

$(window).on('resize', function(ev) {
    if($(window).width() > 480)
        $('html').removeClass('mobile-device').addClass('desktop-device');
    else
        $('html').removeClass('desktop-device').addClass('mobile-device');
});

html.mobile-device .toggle-button {display:none;}

这篇关于在响应式设计中用 CSS 覆盖 JQuery 函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！