1

嗨，我一直在努力弄清楚如何使用 enquire.js。我正在使用 .mouseenter(function() 来激活 .show 和 .hide 功能。但是当您在平板电脑和移动设备上查看它时，.mouseenter 变得多余。我想告诉 jquery 一旦屏幕宽度达到我的就显示 div媒体查询。

 @media only screen and (min-width : 769px ) and (max-width : 959px)

下面是一个例子。

这是我的jQuery：

$(".slidingDiv_how").hide(); 
          $(".show_sub").show(); 

          $('.show_sub').mouseenter(function(){
          $(".slidingDiv_how").slideDown();
            return false;
          });
            });

这是我的html

<div class"right-wrapper"><!--How wrapper -->
                                <div id="how_we" class="show_sub1" style="cursor: hand; cursor: pointer;">
                                    <h1><a href="#">How We Work:</a></h1>
                                        <div class="slidingDiv_how">
                                            <p class="show_sub1">The heat of the vertical rays of the sun was fast making our horrible prisons unbearable, so that after passing a low divide, and entering a sheltering forest, we finally.</br> 
                www.dochouse.co.uk</p>

                                        </div> <!-- end slidingdiv2 -->

我已经阅读了文档，并不太明白该放哪一部分。任何帮助将非常感激。

4

1 回答 1

2

希望这会有所帮助，几乎直接从文档中复制

enquire.register("screen and (min-width : 769px ) and (max-width : 959px)", {
    match : function() {
        $(".slidingDiv_how").show();            
    },
    unmatch : function() {
        $(".slidingDiv_how").hide();
    }
}).listen();

注意最新版本的更改

v2.0.0 (2013-04-17)

从 v2 开始不再需要 listen 和 fire，并且已从 API 中删除。只需在您的代码中删除它们的任何用法。此外，由于查询不再依赖于调整大小事件，您必须确保您的 polyfill 支持 matchMedia.addListener。这方面的详细信息可以在旧版浏览器部分中找到。

于 2013-03-29T10:56:43.590 回答