JQUERY Toggle和Ajax

Question

我有一个菜单和一个子菜单。子菜单内容使用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);
                    }

                });

            });

Answer 1

尝试这个简单的解决方案，并获得一些性能优势，一旦填充子菜单，即使您下次打开它，也不会调用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);
                      }
                    });
                 }

            });

Answer 2

我以前通过添加/删除一个类来做到这一点。

添加测试，如下所示

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

然后在成功处理程序中，使用.addClass(“子菜单加载”)来防止再次进行Ajax调用。

Answer 3

由于.toggle()更改了对象的可见性，因此您可以对照它的CSS display属性进行检查。如果它还没有被隐藏，那么就不需要启动Ajax-Call。