1

ホバー時に、次のコードはサブメニュー パネルで最も高い列を取得し、すべての列を同じ高さに設定します。また、すべての列の幅の合計を取得し、列コンテナーの幅を合計に設定します。

$(function() 
{
    $("#menu> li").hover(function () {
        var tallestColumnHeight = 0, submenuPanelTotalWidth = 0;
        $("ul.sub-menu-1 > li", this).each(function () {
            tallestColumnHeight = Math.max(tallestColumnHeight, $(this).height());
            submenuPanelTotalWidth += parseInt($(this).outerWidth(), 10);
        }).height(tallestColumnHeight);
        $("ul.sub-menu-1 > li", this).parent().width( submenuPanelTotalWidth );
   });  
});

現在、上記のコードには、ホバーごとに高さと幅を 2 ​​回取得して設定するため、多くのオーバーヘッドがあります。計算が一度だけ実行されるように、何らかのフラグを設定したいと思います。

何か案は？ここで jQuery .data() を使用して初期値を一度保存​​してから、データが設定されているかどうかを確認するのが賢明ですか?

これに関する提案やヘルプは大歓迎です!

アップデート

hover() を mouseenter() イベントに置き換えて one() を使用するのが最善の解決策でした。

更新されたコードは次のとおりです。

$(function() 
{
$("#menu > li").one('mouseenter', function(e)   
{
    var tallestColumnHeight = 0,
        submenuPanelTotalWidth = 0;

    $("ul.sub-menu-1 > li", this).each(function ()
    {
        tallestColumnHeight = Math.max(tallestColumnHeight, $(this).height());
        submenuPanelTotalWidth += parseInt($(this).outerWidth(true), 10);
    }).height(tallestColumnHeight);

    $("ul.sub-menu-1 > li", this).parent().width( submenuPanelTotalWidth );     
}); 
   });
4

3 に答える 3

0

eventHandler関数を変数に保存し、保存された変数を使用して要素に対してunbindを呼び出すことができます。ハンドラー関数が実行されなくなるため、これはよりパフォーマンスが高くなります。

$(function()  {

  var hoverFunction = function () {
    var tallestColumnHeight = 0,
    submenuPanelTotalWidth = 0;

    $("ul.sub-menu-1 > li", this).each(function () {
      tallestColumnHeight = Math.max(tallestColumnHeight, $(this).height());
      submenuPanelTotalWidth += parseInt($(this).outerWidth(), 10);
    }).height(tallestColumnHeight);

    $("ul.sub-menu-1 > li", this).parent().width( submenuPanelTotalWidth );
    $("#menu> li").unbind('hover', hoverFunction);
  };

  $("#menu> li").hover();  
});
于 2013-02-06T20:52:07.727 に答える
0 
$("#menu> li").hover(function (){


//your code

$("#menu> li").unbind('hover')
});

ホバー機能にバインドされている他の機能がない場合は、このコードを使用してください。このアンバインド手法は、ホバー イベントに関連付けられた機能を削除します。

于 2013-02-06T20:48:53.663 に答える
0

jquery の .one() 関数を使用できます。残念ながら、ホバーは実際のイベントではありません。代わりに、.one("mouseenter mouseleave",function()... として置き換える必要があります。

于 2013-02-06T21:36:39.623 に答える