터치 장치와 데스크톱 장치 모두에서 드롭다운을 안정적으로 닫으려면 어떻게 해야 합니까?

문서 .click 기능에 대한 터치 장치 지원

반응형 웹사이트로 작업할 때 두 데스크톱 모두에서 모든 기능이 그대로 유지되도록 하는 것이 중요합니다. 그리고 터치 장치. 그러나 문서 .click 기능과 같은 특정 이벤트는 터치스크린에서 예상대로 작동하지 않을 수 있습니다.

문제:

하위 탐색 드롭다운은 상위 목록 항목에 대한 jQuery .click 이벤트입니다. 그러나 드롭다운을 닫기 위해 화면 아무 곳이나 클릭하는 것은 터치 장치에서 작동하지 않습니다.

해결 방법:

이제 최신 브라우저는 탭 상호 작용에 대한 클릭 이벤트를 지원하므로 다음을 사용합니다. document .click이면 충분합니다. 그러나 이전 브라우저에는 추가 터치 이벤트가 필요할 수 있습니다.

$(document).on('click touchstart', function () {
  if ( $(".children").is(":visible")) {
    $("ul.children").slideUp('slow');
  }
});

설명:

터치 시작 이벤트는 터치가 감지되면 즉시 트리거되어 장치에 대한 대체 기능을 제공합니다. 탭에 대한 클릭 이벤트를 지원하지 않습니다. 클릭 이벤트는 최신 브라우저에서 클릭 및 탭 상호 작용을 모두 처리하기 위해 그대로 유지됩니다.

두 이벤트를 결합하면 사용되는 장치에 관계없이 화면의 아무 곳이나 클릭하거나 탭하여 드롭다운을 닫을 수 있습니다. .

위 내용은 터치 장치와 데스크톱 장치 모두에서 드롭다운을 안정적으로 닫으려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!