Question

所以我试图找出如何在移动设备上实现点击效果。我希望桌面/笔记本电脑上的悬停效果和移动设备上的点击效果。

目前实施悬停效果。正如您在我网站的主页上看到的那样：http://otownsend.ca/

我需要弄清楚如何在特定屏幕尺寸（例如800像素）下实现点击效果。因此，一旦光标悬停在＆＃34; .flipper＆＃34;上而不是卡片翻转，点击效果将要求用户点击＆＃34; .flipper＆＃34;为了让卡片翻转。这将要求我将其置于条件声明中 - 但是，它不起作用。我对JQuery并不熟悉，所以它一直都是挑战。这就是我目前所拥有的：

if (window.matchMedia('(max-width: 800px)').matches)
{
    $('.flipper').click(function (e) {
  $(this).toggleClass('flipped');
});
}

＆＃34; .flipper＆＃34;是前面和后面的父元素。所有的css和html都是一样的。我只需要集成这个JQuery的东西然后我就设置了。

任何建议都将受到赞赏：）

Answer 1

您可以使用removeClass()和addClass()。我还使用click更改了您的.on('click')活动。我建议你这样使用它。另外，在$(document).ready()中添加代码。我希望这就是你所需要的。如果没有，请告诉我，我会尝试不同的方法：

＆＃13;

$(document).ready(function() {
  $('.flipper').on('click', function(e) {
    $('.flipped').removeClass('flipped');
    $(this).addClass('flipped');
  });
});

＆＃13;

关于matchMedia，您可以通过运行测试代码看到它的工作原理：

＆＃13;

if (window.matchMedia('(max-width: 800px)').matches) {
  $('.flipper').css('color', '#f00');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class='flipper'>
  testing matchMedia
</p>

＆＃13;

另外，我在你的代码中看到你做错了什么。您在另一个<script>标记内添加了包含jQuery来源的<script>代码（或者您忘记关闭</script>代码）。这是错的。请更正：

<script type="text/javascript">
    $(function(){
      $(".flipper").flip({
        trigger: "hover"
      });
    });
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

对此：

＆＃13;

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript">
  $(function() {
    if (window.matchMedia('(min-width: 801px)').matches) {
       $(".flipper").flip({
         trigger: "hover"
       });
    }
 });
</script>

＆＃13;

请注意，仅为桌面添加了媒体查询，从801px起。

作为建议，我建议您使用像Modernizr这样的库作为媒体查询部分。使用Modernizr使用媒体查询的方式，您不必刷新页面以查看使用matchMedia时的更改。当您在移动设备上从纵向切换到横向时，这也有帮助。您可以阅读有关Modernizr媒体查询的文档 here 。

翻转效果条件

1 个答案: