Question

我有一个链接到单独页面的按钮，该页面位于使用jQuery滑动打开和关闭的面板内。单击按钮，我希望面板滑动关闭，然后在主窗口中加载链接页面。

以下是代码：

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

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

“plusMinus”回调只是另一个切换小图像以指示面板是否可以展开的功能。

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

非常感谢您的帮助。

Answer 1

您需要取消点击，然后直接在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 + Click，Ctrl + Click等，因为您将取消激活的操作，并将其替换为您自己的操作代替。您必须问自己，您提供的用户体验是否合适且值得这样做。

Answer 2

您可以使用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/

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

2 个答案: