Javascript로 프로그래밍하는 경우 클릭 한 번에 메뉴를 열거 나 사용자가 메뉴 외부를 클릭하면 닫히는 상황에서 실행되었을 수 있습니다. 나는 그것을 할 수있는 아주 간단한 방법을 개발했습니다. 문서 본문에 이벤트 리스너를 추가합니다. 누군가 클릭하면 이벤트의 대상 ID를 찾습니다. 박스의 div의 ID와 일치하면 아무것도하지 마십시오. 그렇지 않은 경우 메뉴를 닫습니다.
조금 더 나아가면 사용하지 않을 때 클릭 이벤트 리스너를 몸 전체에 두는 것은 비효율적입니다. 이 경우 메뉴를 아직 열지 않은 경우 메뉴 외부에서 클릭 소리를들을 이유가 없습니다. 표시되는 div의 콜백에 이벤트 리스너를 추가하십시오. 같은 맥락에서 div가 다시 숨겨지면 이벤트 리스너를 제거하십시오.
Show Div 박스를 클릭하면 아무 일도 일어나지 않습니다. 외부를 클릭하면 사라집니다. $ ( '# showbox'). click (function () {$ ( '# bigbox'). show (function () {document.body.addEventListener ( 'click', boxCloser, false);}) ;}); function boxCloser (e) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ( 'click', boxCloser, false); $ ( '# bigbox'). hide (); }}
또한 위의 기능 중 일부가 해당 라이브러리를 사용하므로 프로젝트에 jQuery를 포함시켜야합니다.
