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

回答

相关问题