Question

对于细长的标题感到抱歉，我正在寻找你的帮助来解决一个让我疯狂的问题。

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

函数将触发
函数将运行如果窗口宽度大于页面加载或窗口大小调整大小的上述值，
函数将不会运行

如果这让我们感到困惑，我道歉，这是我迄今为止帮助解释它的代码。

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，因为我觉得不需要，因为这只是功能而不是设计。

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

Answer 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();

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

Answer 2

请尝试以下代码：

 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 )条件

如果窗口宽度=＆gt;

EDIT2： unbind点击事件496

如果窗口宽度小于严格量，则jQuery处理程序触发窗口严格宽度和/或窗口大小调整

2 个答案: