모바일과 데스크톱 간 드롭 다운시 호버 전환

Question

브라우저의 너비에 따라 html을 제거하거나 추가하는 간단한 JS가 있습니다. 모바일에있는 경우 data-hover 속성을 삭제해야합니다. 너비가 바탕 화면에 있으면 속성을 추가해야합니다.

지금까지는 훌륭했지만 문제는 부트 스트랩이 data-hover이 제거되었음을 인식하지 못한다는 것입니다. 드롭 다운은 사용자의 마우스가 드롭 다운에서 나올 때까지 닫힙니다. 분명히하기 위해 윈도우 브라우저 너비가 768px 미만일 때 사용자의 마우스가 드롭 다운 상태를 유지할 때 드롭 다운을 열어두기를 원합니다.

무엇이 잘못되었으며 어떻게 해결할 수 있습니까?

JS

$(document).ready(function() { 
    $(window).resize(function() { 
    if ($(window).width() < 768) { 
     $('.dropdown-toggle').removeAttr('data-hover'); 
    } else { 
     $('.dropdown-toggle').attr('data-hover', 'dropdown'); 
    } 
    }); 
}); 

HTML

<a class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown" role="menu" aria-expanded="false" href="/courses"> 
    Courses    
</a> 

<ul class="dropdown-menu courses-dropdown"> 
    <li>hello</li>        
</ul> 

Answer 1

참고 : 을 사용하는 경우 data-hover을 빈 문자열로 설정하는 것과 관련하여 BDD에서 제공하는 솔루션이 작동합니다. 그러나 OP는 rather poorly built dropdown hover plugin을 사용했으며이 대답은 해당 플러그인의 문제점을 테이프로 제거하는 역할을합니다.

data-hover은 부트 스트랩 드롭 다운의 일부가 아니라 some guys extension to bootstrap 인 것으로 보입니다. 너와 그 커뮤니티 전체에 불행한 것은 그 남자가 그의 플러그인을 파괴 할 방법을 제공하지 않았기 때문이다. 플러그인 작성자가 플러그인을 끊어 버릴 방법을 제공하지 않아서 이것이 메모리 누수의 심각한 원인이며, 일반적으로 프로그래밍이 좋지 않다는 것을 항상 저에게 놀라게합니다. </rant>

올바른 작업을 수행하려면 수동으로 이벤트를 바인딩 해제하고 리 바인드해야합니다. 다시 한 번 당신과 커뮤니티에 불행한 그는 hover 이벤트의 네임 스페이스를 지정하지 않았습니다.이 이벤트는 실제로 무책임한 플러그인 개발 (내부에서 울음)입니다. 우리는 플러그인 작성자가 수행해야하는 모든 작업을 수행 할 것이므로 플러그인을 확장하여 작성자가 자신이하는 일을 알고있는 것처럼 보이게 할 수도 있습니다. 페이지의 다른 기능이 hover 이벤트를 드롭 다운에 추가하면 해당 기능이 중단됩니다 (이것은 작성자가 이벤트의 이름을 지정하지 않았기 때문입니다).

$.fn.dropdownHover.disableAll = function() { 
    $('[data-hover="dropdown"]').each(function() { 
     $(this).off('hover').parent().off('hover').find('.dropdown-submenu').off('hover'); 
    }); 
}); 

$.fn.dropdownHover.enableAll = function() { 
    $('[data-hover="dropdown"]').dropdownHover(); 
}); 

지금 당신의 resize 이벤트 내부에서이 같은 수행해야합니다 당신은 내가 정말이를 테스트 할 수 없기 때문에 위의 코드와 함께 놀러 할 수 있습니다

var $window = $(window); 
$(document).ready(function() { 
    $window.resize(function() { 
    if ($window.width() < 768) { 
     $.fn.dropdownHover.disableAll(); 
    } else { 
     $.fn.dropdownHover.enableAll(); 
    } 
    }); 
}); 

합니다. 작동하는지 여부를 알려주세요. 그리고이 모든 작업에 착수 했으므로이 세상에서 좋은 모든 것을 사랑하기 위해 을 사용하십시오. 단일 페이지 응용 프로그램에서 이것을 사용하고 현재 페이지가 인 경우 disableAll 함수로 호출하십시오. 이것이 메모리 누출을 방지 할 수있는 방법입니다. 감사.

Answer 2

대신 완전히 속성을 제거, 당신은과 같이 아무것도에 재 할당 할 수 있습니다 :

$('.dropdown-toggle').attr('data-hover', ''); 

을 할당 값이없는 경우 속성, 아무것도해서는 안됩니다.