올바른 하이퍼 링크로 창을 닫습니다.

Question

jQuery Align DIV to Link의 후속 조치.

클릭 한 링크 옆에 창을 여는 작업 스크립트가 있습니다.

내가 가진 문제는 창이 열렸을 때 다른 링크를 클릭하면 어떻게됩니까? 링크 D를 클릭하면 창이 열립니다. 그러면 창이 열린 상태에서 링크 A를 클릭하면 링크 A에서 창이 닫힙니다.

FIDDLE은 무엇을 의미하는지 보여줍니다.

나도하고 싶습니다. 열려있는 창을 닫고 새 링크에서 다시 열거 나 닫는 링크를 통해서만 닫을 수 있습니다.

function deselect(e) { 
    $('.pop').slideFadeToggle(function() { 
    e.removeClass('selected'); 
    });  
} 

$(function() { 
     $("[id$='contact']").click(function(){ 

    if($(this).hasClass('selected')) { 
     deselect($(this));    
    } else { 
     $(this).addClass('selected'); 
     $(".messagepop").css({position:"absolute", 
          top:$(this).offset().top, 
          left: $(this).offset().left}); 
     $('.pop').slideFadeToggle(); 
    } 
    return false; 
    }); 

    $('.close').on('click', function() { 
    deselect($('#contact')); 
    return false; 
    }); 
}); 

$.fn.slideFadeToggle = function(easing, callback) { 
    return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback); 
}; 

어떤 생각 나는이 작업을 수행 할 수 있습니다

이것은 내가 사용하고 코드는?

Answer 1

여기에서 발견 할 수있는 문제는 애니메이션에서 토글 기능을 사용하고 클릭 이벤트를 제어하려고하는 문제입니다. 토글을 사용하는 대신 표시/숨기기에 대한 애니메이션을 처리해야합니다.

아래의 JS 코드는 예상대로 작동합니다. 애니메이션에서 토글을 제거하려고 시도하는 목적을 해결하면 시도하십시오.

$(function() { 
    $("[id$='contact']").click(function(){ 
    var src = $(this); 
    $("[id$='contact']").removeClass('selected'); 
    $('.pop').slideFadeToggle(function() { 
     $(".messagepop").css({position:"absolute", 
          top:src.offset().top, 
          left:src.offset().left}); 
     src.addClass('selected'); 
    }); 

    return false; 
    }); 

    $('.close').on('click', function() { 
    deselect($('#contact')); 
    return false; 
    }); 
}); 

$.fn.slideFadeToggle = function(easing, callback) { 
    return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback); 
};