2011-01-22 8 views
1

jQuery를 사용하여 열거 나 닫힌 패널의 내부에있는 별도의 페이지로 연결되는 버튼이 있습니다. 버튼을 클릭하면 패널이 닫힌 상태로 슬라이드 된 다음 링크 된 페이지가 기본 창에로드됩니다. 은 "plusMinus"콜백 패널이 확장 여부를 할 수 있는지 여부를 나타 내기 위해 작은 이미지를 전환 또 다른 기능입니다슬라이드 토글 완료 후 jQuery에서 페이지를로드 할 수 있습니까?

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

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

:

여기에 코드입니다.

문제는 링크를 클릭하면 새 페이지 로딩이 패널 닫기 애니메이션을 중단하고 페이지가 다시로드되기 전에 부분적으로 닫을 수있게하는 것입니다. "closePanel"을 일반 HTML 링크 대신 콜백 함수로 링크 된 페이지로드가있는 방법이 있습니까, 그래서 패널이 완전히 닫을 수있는 기회를 가질 수 있습니까?

도움을 주셔서 감사합니다.

답변

0

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이 완료되면 사용자에게 새 페이지가 표시됩니다. 당신은 클릭을 취소해야하고, 다음 slideToggle에 콜백에서 직접 location을 변경할 수 있습니다 http://jsfiddle.net/andrewwhitaker/QDYvx/

1

:

다음은 작업 예입니다. 뭔가 같은 :

$("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 키를 클릭, 클릭합니다, 대신 자신의 행동으로 대체하십시오. 당신이 제공하는 사용자 경험이 적절하고 그렇게 할만한 가치가 있는지 스스로에게 물어야합니다.

관련 문제