아코디언이 초점을 잃었을 때 접히는 방법?

jquery-ui 프레임 워크의 일부인 아코디언을 사용하고 있습니다. 사용자가 화면의 다른 부분을 클릭하면 아코디언이 완전히 축소되기를 원합니다.아코디언이 초점을 잃었을 때 접히는 방법?

아코디언 컨테이너에 흐림 이벤트를 첨부하려고했지만 예기치 않은 시간이 지나가는 것 같습니다. 여기

는 JSFiddle

당신이 볼 수 있듯이, 흐림 이벤트가 아코디언 섹션이 닫힐 때 해고하고 다른 시간에 있습니다에 대한 예입니다. 열린 아코디언 섹션에 초점이 맞지 않는 경우에만 이벤트가 시작되기를 원합니다.

나는 아코디언 섹션에 블러 이벤트를 첨부하려고 시도했으나 결코 실행되지 않습니다. Example

출처

2011-05-04 Rupert Madden-Abbott

내가 성공적으로 events outside plugin를 사용하여이 작업을 수행 할 수 있었다. 나는 이것이 꽤 무거운 해결책이라고 생각한다. 그래서 누군가가 더 좋은 것을 가지고 있다면 그것은 좋을 것이다.

대신 흐림 이벤트를 사용하는 단지 컨테이너 요소에 바인더 제본에 'clickoutside'이벤트 사용 : 사용자 탭 요소 외부 또는 기타는 클릭하지 않고 포커스를 잃을 경우

$('.container').bind('clickoutside', function() { 
    $(this).accordion("activate", false); 
});

이 작동하지 않습니다를하지만, 그것은 내 목적으로는 충분했다.

출처

2011-05-04 23:22:43

생각보다 쉽지 않은 것처럼 보입니다. 부분적인 해결책이를 참조하십시오 : 그것은 파괴와 아코디언, 내가 지금있는 유일한 솔루션을 재 활성화

function activate() { 

    $('.container').accordion("destroy"); 

    $('.container').accordion({ 
     collapsible: true, 
     active: false 
    }); 

} 

activate(); 

$('.container h3').live('blur', function() { 
    $(".container").accordion('activate', false); 
    activate(); // this should be delayed until the elements are closed 
});

효과가 있지만 닫는 애니메이션은 아닙니다. 어쩌면 조금만 노력하면 제대로 작동 할 수 있습니다 (코드의 힌트 참조).

편집 :

노트 나는 <a> -tags을 제거, 그래서 헤더는 다음과 같다 :

<h3>Example</h3>

출처

2011-05-04 21:54:42 Markus

내 두 번째 시도, 플러그인 없음 (여전히 다소 무거운 것) : 마우스 위치와 컨테이너 크기를 비교하기 만하면됩니다.

편집 : 이제 초점도 맞 춥니 다.

는 jsfiddle

EDIT 2를 참조하십시오 : 불행히도 조금 있지만, 버그, 항목 때때로 다시 열지 마십시오 붕괴 ... 당신이 용기 외부를 두 번 클릭해야합니다. 이유를 모르겠다.

출처

2011-05-05 10:13:00 Markus

당신은 문서부터 JQuery's mouseleave event

를 사용할 수 있습니다

하는 MouseLeave 자바 스크립트 이벤트가 인터넷 익스플로러 독점이다. 이벤트의 일반 유틸리티 때문에 jQuery는이 이벤트를 시뮬레이트하므로 브라우저와 상관없이 사용할 수 있습니다.이 이벤트는 마우스 포인터가 요소를 떠날 때 요소로 전송됩니다. 모든 HTML 요소 은이 이벤트를 수신 할 수 있습니다.

는 여기 demo

HTML

<div id="outside"></div> 

<div id="accordion"> 
    <div>Panel 0</div> 
    <div>Content 0</div> 
    <div>Panel 1</div> 
    <div>Content 1</div> 
    <div>Panel2</div> 
    <div>Content 2</div>

에게

$('#accordion').accordion({ 
    heightStyle: "content", 
    collapsible: true, 
    active: false 
    }); 

    $('#accordion').on('mouseleave', function() { 
    $(this).accordion("activate", false); 
    });

JS있어

출처

2015-08-05 00:26:55 user2314737

아코디언이 초점을 잃었을 때 접히는 방법?

답변

관련 문제