내 코드가 원하는대로 작동하지 않는 이유는 무엇입니까? 모바일 네비게이션을 전환 할 때 첫 번째 두 번 클릭하면 제대로 작동하지만 원하는대로 마진을 추가하지 않는 세 번째 시간입니다.클릭하면 메뉴가 추가 간격 (여백)을 토글합니다.
jQuery(document).ready(function($){
$("#site-navigation.main-navigation").click(function(){
$("#page").css("margin-top", "285px");
});
$("#site-navigation.main-navigation.toggled").click(function(){
$("#page").css("margin-top", "0px");
});
});
#site-navigation.main-navigation에 ".toggle"클래스가있는 경우 두 이벤트가 동시에 발생합니다. 그건 당신이 의도 한 것이 아닙니다. 이 코드는 원하는 것을 할 것입니다.
jQuery(document).ready(function($){
$("#site-navigation.main-navigation").click(function(){
if ($(this).hasClass('toggled')) {
$("#page").css("margin-top", "0px");
} else {
$("#page").css("margin-top", "285px");
}
});
});
이 경우 중요하지 않습니다. 이벤트 리스너의 순서에 따라 작동해야하며, 다른 문제가있을 수 있습니다. 아마도 html로 알려줄 수 있습니다. – Joint
CSS 클래스를 토글합니다.
document.getElementById("foo").addEventListener("click", function(e) {
this.classList.toggle("bump-it");
});.bump-it{
margin-left:24px;
}<button id="foo">
click me
</button>
1) 당신은 누구 디버그 할 수 있도록하기위한 HTML을 포함해야합니다. 2) 코드 스 니펫이 StackOverflow 용으로 올바르게 포맷되어 있지 않습니다. 스 니펫 편집기의 다른 부분에 자바 스크립트와 HTML을 별도로 추가해야 자동으로 실행될 수 있습니다. –
또한 첫 번째 클릭 기능을 제대로 닫지는 않습니다 ... – Gabplay
페이지로드시 초기 상태에 따라 요소에 대한 바인딩을 정의하기 때문에이 논리가 마음에들 것입니다. 'toggled' 클래스를 메인 네비게이션 요소에 추가하거나 제거해도 다른 바인딩을 사용하여 시작할 수는 없습니다. 그 위에 배치 된 바인딩 만 사용합니다. 직접 바인딩의 짧은 시간은 대리인 바인딩을 사용하여 끝날 수 있습니다. – Taplar