JQUERY Toggle和Ajax

我有一個菜單和一個子菜單。子菜單內容使用ajax加載。JQUERY Toggle和Ajax

子菜單切換。問題是當我點擊隱藏子菜單時，它仍然會進行ajax調用。

我怎樣才能讓它做一個Ajax調用，當我點擊打開菜單？

$("#showsubmenu").live("click", function() { 
       var attrib = $(this).attr('menuid'); 

       $("#"+attrib).toggle(); 
       $("#"+attrib).html("<h4>&nbsp;&nbsp;Loading links...</h4>"); 
       $.ajax({ 
        cache: false, 
        url: "submenu.php", 
        dataType: "html", 
        data: "&menuid="+attrib, 
        success: function (data) { 
         $("#"+attrib).html(data); 
         }, 
        error: function(jqXHR, textStatus, errorThrown) { 
         alert(textStatus); 
        } 

       }); 

      });

來源

2011-07-23 vitalyp

試試這個簡單的解決方案，以及一些性能上的好處，即使下次打開子菜單時，也不會進行ajax調用。我希望這能幫到您。

$("#showsubmenu").live("click", function() { 
       var attrib = $(this).attr('menuid'); 
       var $attrib = $("#"+attrib); 

       $attrib.toggle(); 

       if(!$attrib.data("subMenuPopulated") && $attrib.is(":visible")){ 

        $attrib.html("<h4>&nbsp;&nbsp;Loading links...</h4>"); 
        $.ajax({ 
        cache: false, 
        url: "submenu.php", 
        dataType: "html", 
        data: "&menuid="+attrib, 
        success: function (data) { 
         $attrib.html(data).data("subMenuPopulated", true); 
         }, 
         error: function(jqXHR, textStatus, errorThrown) { 
         alert(textStatus); 
         } 
        }); 
       } 

      });

來源

2011-07-23 20:08:04 ShankarSangoli

因爲.toggle()改變對象的可見性，你可以對證的CSS顯示屬性。如果它尚未隱藏，則不需要啓動Ajax-Call。

來源

2011-07-23 19:28:57 Semyazas

我以前通過添加/刪除類來完成它。

在成功處理程序添加一個測試像

if(!$(this).hasClass("submenu-loaded")) {   
    ...Ajax call 
}

然後，使用.addClass（「子菜單加載」），以防止Ajax調用被再次提出。

來源

2011-07-23 19:31:04

我試過這個，它工作。謝謝！每次菜單打開時我要如何重新加載？ – vitalyp

您可以使用.toggleClass（「submenu-loaded」）來代替，如果它不存在，它將添加類，如果它不存在，則將其刪除（但您必須在Ajax調用之外執行此操作）。或者，您可以添加一個'else {$（this）.removeClass（「submenu-loaded」）; （'）測試。重點是如果不存在，則刪除類，如果不存在，則添加它（並進行Ajax調用）。 –

哦，並隨時接受/投票答案，如果你喜歡它;-) –

 
if ($("#"+attrib).not(':visible')) { 
    ...run ajax code 
}

這只是檢查子菜單是否可見，如果不是，那麼你可以執行ajax代碼。

或者，如果你想檢查代碼的子菜單中的存在，你可以這樣做：在子菜單中的任何HTML

 
if ($("#"+attrib).html().length == 0) { 
    ...run ajax code 
}

此代碼檢查，如果沒有發現ajax代碼可以運行。

來源

2011-07-23 19:35:50 Jasper

JQUERY Toggle和Ajax

回答

相關問題