3

我有一个流畅的网格布局。我需要一些列（不太必要——比如 Twitter 更新）在较小的分辨率上是“隐藏的”，在点击它的标题时是“显示的”。

这是我到目前为止所拥有的：

HTML

<div id="wrapper">

    <div class="toggle">
         <h2>Heading</h2>
         This content is visible always
    </div>

    <div class="toggle-small">
         <h2 class="toggle-small-heading">Heading</h2>
         <div class="toggle-small-content">
              This content is hidden on max-width 600px. You can reveal it by clicking the heading.
         </div>
    </div>

    <div class="toggle-small">
         <h2 class="toggle-small-heading">Heading</h2>
         <div class="toggle-small-content">
              This content is hidden on max-width 600px. You can reveal it by clicking the heading.
         </div>
    </div>

</div>

查询

// D E F I N E   T H E   F U N C T I O N

function ToggleSmall () {
     // CONDITIONALS
    // Clickable heading
    var ToggleSmallVar = $('#wrapper').find('.toggle-small-heading');
    // Content to toggle
    var ToggleSmallCol = $('#wrapper').find('.toggle-small-content');
    // FUNCTION
    // Content to toggle - hide it to be shown on click
    $(ToggleSmallCol).addClass('none');
    // Toggle function
    $(ToggleSmallVar).click(function () {
        // Find col to toggle
        var ToggleSmallColTarget = $(this).closest('.toggle-small-section').find('.toggle-small-col'); 
                    // Toggle the DIV
        $(ToggleSmallColTarget).slideToggle('slow');
    });
}

// C A L L   T H E   F U N C T I O N

$(document).ready(function () {
if ($(window).width() < 681) {
    ToggleSmall();
}
});

它在加载时工作，但我尝试让它在窗口调整大小时“响应”工作：在小于 681 的分辨率上执行 ToggleSmall() 函数并在更大的分辨率上停止它。

我试图在“resize”事件上绑定函数（例如jQuery 作为 resize 上的媒体查询），但由于某种原因，“切换”执行了 3-4 次（文档多次“准备好”？）。

我发现了一些其他的解决方案——主要是定义一个变量——但到目前为止都没有。我也是一个 jQuery 新手，所以也许我错过了一些东西。：） 有任何想法吗？

4

2 回答 2

4

有人建议使用“计时器”事件侦听器来规范 javascript 的行为和处理

来自Curt Howard 示例的复制粘贴：

var delay = (function(){
    var timer = 0;
    return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    };
})();

$(function() {
    var pause = 100;
    // will only process code within delay(function() { ... }) every 100ms.

    $(window).resize(function() {
        delay(function() {
            var width = $(window).width();
            if( width >= 768 && width <= 959 ) {
                // code for tablet view
            } else if( width >= 480 && width <= 767 ) {
                // code for mobile landscape
            } else if( width <= 479 ) {
                // code for mobile portrait
            }
        }, pause );
    });

    $(window).resize();
});
于 2013-06-21T15:31:09.060 回答
3

如果您使用此功能$(window).resize(function() {});，则无需将其放在 document.ready 中。我要做的是尝试操作 CSS，因为无论如何，当它缩小时，你无法真正看到隐藏部分的动画。

这是js。

$(window).resize(function() {
var pageWidth = $(window).width(); 

    if( $(window).width()< 681){

        //call my function
        //myfunction();

    $('#styleSmaller').attr('href','../css/siteSMALLER.css');
    }
    });

然后你有你的链接<head>

        <link type="text/css" rel="stylesheet" href="" id="styleSmaller"/>
于 2013-02-12T00:42:20.047 回答