画面サイズに応じてトランジションタイプを変更してください

Question

ウェブサイトのサイズが750ピクセルを超えると、ホバー効果でドロップダウンが滑り落ちますが、クリックトグルでは750ピクセル以下のドロップダウンが機能します。

メディアクエリが（750px float == left）より大きく、if（750px float == none）未満であることを確認します 650pxのWeb幅で開始するとonclickの切り替えが行われますが、それをフルスクリーンにリサイズしてから650pxに戻すと、ホバーとして表示され、クリックトグルだけでなくonclickトグルも表示されます。

誰かが私が間違っていることを説明できますか？私はjqueryにはかなり新しいです。

ありがとうございます！

$(document).ready(function() { 
    checkSize(); 
    $(window).resize(checkSize); 
}); 

//Function to the css rule 
function checkSize() { 
    if ($("#drop > li").css("float") == "none") { 
     $('#dropdown-btn').click(function() { 
      $('.dropdown').slideToggle(200); 

     }); 
    } else if ($("#drop > li").css("float") == "left") { 
     $('#dropdown-btn').hover(
      function() { 
       $('.dropdown').slideDown(200); 




      }, 
      function() { 
       $('.dropdown').slideUp(200); 


      } 

     ); 
    } 
}; 

Answer 1

私はあなたの問題はあなたのcheckSize機能は、サイズ変更に非常に多くある、イベントにそれが引き金一つ一つの時間を結合することが、事実だと思います。あなたはまた、代わりにhover()またはclick()のjQuerys on()機能を使用する必要があります

$(document).ready(function() { 

    $('#dropdown-btn').on('click',function() { 
     if($("#drop > li").css("float") == "none")) 
     $('.dropdown').slideToggle(200); 
    }); 

    $('#dropdown-btn').on({ 
     mouseenter: function() { 
     //stuff to do on mouse enter 
     if ($("#drop > li").css("float") == "left") 
      $('.dropdown').slideDown(200); 
     }, 
     mouseleave: function() { 
     //stuff to do on mouse leave 
     if ($("#drop > li").css("float") == "left") 
      $('.dropdown').slideUp(200); 
     } 
}); 

：より良い方法は、あなたのサイズ変更機能を取り除くなどのように右のあなたのイベントにif文を使うことです。

参考：http://api.jquery.com/on/