完成幻灯片切换后，我可以让jQuery加载页面吗？

我有一个按钮链接到一个单独的页面，这是一个使用jQuery滑动打开和关闭的面板。点击按钮后，我想让面板滑动关闭，然后在主窗口中加载链接的页面。完成幻灯片切换后，我可以让jQuery加载页面吗？

下面的代码：

$("a.appLink").click(function(){ 
    closePanel(); 
}); 

var closePanel = function(){ 
    if ($(".panel").is(":visible")) { 
     $(".panel").slideToggle("medium",plusMinus) 
    }}

的“plusMinus”回调仅仅是切换有点像指示面板是否可以扩大或没有其他功能。

问题是，当我点击链接时，新的页面加载会中断面板关闭动画，只允许它在页面重新加载前部分关闭。有没有办法让链接页面在“closePanel”之后加载为回调函数，而不仅仅是一个普通的HTML链接，因此面板可以有机会完全关闭？

非常感谢您的帮助。

来源

2011-01-22 R.J.

您可以使用event.preventDefault()并稍后在slideToggle的回调中重定向用户。

$("a.appLink").click(function(event){ 
    // Cancel the default behavior of the link: 
    event.preventDefault(); 
    var link = this; 
    closePanel(function() { 
     plusMinus(); 
     window.location.href = link.href; 
    }); 
}); 

var closePanel = function(callback){ 
    if ($(".panel").is(":visible")) { 
     $(".panel").slideToggle("medium", callback) 
    } 
}

这应该在plusMinus完成后将用户引导到新页面。

这里有一个工作示例：http://jsfiddle.net/andrewwhitaker/QDYvx/

来源

2011-01-22 00:31:50

你需要取消点击，然后直接改变location回调上slideToggle。喜欢的东西：

$("a.appLink").click(function(){ 
    closePanel(this.href); // <== Pass the `href` of the link 
    return false;   // <== Cancel the click 
}); 

var closePanel = function(href){ 
    if ($(".panel").is(":visible")) { 
     $(".panel").slideToggle("medium",function() { 
      plusMinus(); 
      location = href; // <== Navigate to the link 
     }); 
    } 
    else { 
     location = href;  // <== If it makes sense to do the navigation anyway 
    } 
}; 
...

有点偏离主题，但：请注意，这样做，你会被打破Shift键+单击，按Ctrl +点击，等等，因为你会被取消，他们激活动作，取而代之的是你自己的行动。你必须问自己，你提供的用户体验是否合适，值得这样做。

来源

2011-01-22 00:33:03

完成幻灯片切换后，我可以让jQuery加载页面吗？

回答

相关问题