0

抱歉标题过长，我正在寻求您的帮助来解决一个让我慢慢发疯的问题。

我试图找到一种在某些情况下可以运行函数的方法。这些情况如下：

  • 如果页面加载时窗口宽度等于或小于特定值 (496)，函数将触发
  • 如果窗口被调整为上述值或小于上述值，函数将运行
  • 如果窗口宽度大于页面加载或窗口调整大小时的上述值，函数将不会运行

如果这让你们中的任何人感到困惑，我深表歉意，这是我迄今为止帮助进一步解释的代码。

jQuery：

if($(window).width() < 496 || ($(window).resize() && $(window).width() < 496)) {
    add_cta_arrows_for_mobile();
}

function add_cta_arrows_for_mobile() {
    $("#hori_ctas h4").addClass('arrow-down');

    $("#hori_ctas h4").click(function() {

        if($(this).attr('data-state') == 'dropped') {
            $(this).removeAttr('data-state').removeClass('arrow-up').addClass('arrow-down');
        } else {
            $(this).attr('data-state','dropped').removeClass('arrow-down').addClass('arrow-up');
        }
        $(this).next().children('div').slideToggle(800);
    });
}

我没有包含 html 或 CSS，因为我觉得没有必要，因为这只是功能而非设计。

提前感谢任何花时间提供帮助的人。

4

2 回答 2

1 
// cache relevant elements
var $win = $(window),
    $target = $("#hori_ctas"),
    $titles = $target.find('h4');

function add_cta_arrows_for_mobile() {
    // add arrow and event handler class, remove otherwise
    if($win.innerWidth() < 496) {
        $titles.addClass('clickable arrow-down');
    } else {
        $titles.removeClass('clickable arrow-down');
    }
}

// no need to bind event handler on every resize, do it once with delegation
$target.on('click', '.clickable', function() {
    var $this = $(this),
        state = $this.data('state');

    // toggle class and state
    $this
        .data('state', state == 'dropped' ? '' : 'dropped')
        .toggleClass('arrow-up arrow-down')
        .next().children('div')
            .slideToggle(800);
});

$win.on('resize', function() {
    add_cta_arrows_for_mobile()
});

// initially set arrows
add_cta_arrows_for_mobile();

注意：不要总是在窗口调整大小时绑定和取消绑定事件处理程序，只需将函数绑定到具有委托的类并切换该类。

于 2013-03-20T10:29:14.350 回答
0

试试下面的代码： 

 function add_cta_arrows_for_mobile() {


                $("#hori_ctas h4").addClass('arrow-down');

                $("#hori_ctas h4").click(function() {

                    if($(this).attr('data-state') == 'dropped') {
                        $(this).removeAttr('data-state').removeClass('arrow-up').addClass('arrow-down');
                    } else {
                        $(this).attr('data-state','dropped').removeClass('arrow-down').addClass('arrow-up');
                    }
                    $(this).next().children('div').slideToggle(800);
                });
            }

        var $win = $(window);

        $win.load(function(){

        if($win.width() <= 496 ) {
               add_cta_arrows_for_mobile();
        }else{

         $("#hori_ctas h4").unbind('click'); 
        }

            });

            $win.resize(function(){



            if($win.width() <= 496 ) {
                add_cta_arrows_for_mobile();
            }else{


                $("#hori_ctas h4").unbind('click');


}


            });

编辑： 添加if($win.width() <= 496 )条件

EDIT2： unbind如果窗口宽度=> 496，则编辑单击事件

于 2013-03-20T10:15:44.053 回答