0

私はレスポンシブ デザインに取り組んでおり、メニューが 540px (モバイル用) より小さいときに変更される機能を作成しました。それは変わりますが、ボタンをクリックすることはできません。私の推測では、関数内の関数が原因であると思われます。

これは機能しない部分です：

  $('.menuknop').click(function(){
      $(".menu").slideToggle();
  });

完全なコード:

checkWidth(){
    var windowSize = $(window).width();
    if (windowSize < 540) {
        $(".menu").hide();
        $(".menuknop").show();

        $('.menuknop').click(function(){
            $(".menu").slideToggle();
        });
    }
    else {
        $(".menuknop").hide();
        $(".menu").show();
    }
}

//Execute function
checkWidth();
$(window).resize(checkWidth);
4

3 に答える 3

1

「ボタンをクリックできない」が何を意味するのかは明確ではありませんが、コードには少なくとも 1 つの問題があります。resize幅を 540px 未満にするすべてのイベントは、追加のハンドラを のclickイベントにアタッチし.menuknopます。

ウィンドウで遊んでいると、そのような何百もの同一のハンドラーが簡単に作成され、要素をクリックすると混乱が生じる可能性があります。

ロジックを作り直すことで、この問題を解決できます。

checkWidth(){
    var windowSize = $(window).width();
    $('.menuknop').click(function(){
        var windowSize = $(window).width(); // calculate again
        if (windowSize < 540) {
            $(".menu").slideToggle();
        }
    });

    var lessThan540 = windowSize < 540;
    $(".menu").toggle(!lessThan540);
    $(".menuknop").toggle(lessThan540);
}
于 2013-05-19T10:38:55.233 に答える
0

これは、あなたの望むことですか？

ワーキングデモ

 $('.menuknop').click(function(){
      $(".menu").slideToggle();
  });
function checkWidth(){
    var windowSize = $(window).width();
    if (windowSize < 540) {
        $(".menu").hide();
        $(".menuknop").show();
    }
    else {
        $(".menuknop").hide();
        $(".menu").show();
    }
}

$(window).resize(checkWidth);
于 2013-05-19T10:47:25.330 に答える
0

このように外部でクリックハンドラーを定義できます-

var windowSize = 0;
checkWidth() {
    windowSize = $(window).width();
    if (windowSize < 540) {
        $(".menu").hide();
        $(".menuknop").show();
    } else {
        $(".menuknop").hide();
        $(".menu").show();
    }
}

//Execute function
checkWidth();
$(window).resize(checkWidth);


$('.menuknop').click(function () {
    if (windowSize < 540) {
        $(".menu").slideToggle();
    }
});

デモ--> http://jsfiddle.net/vmcFH/

于 2013-05-19T10:40:19.477 に答える