그누보드 메뉴에대한 마우스 이벤 정지문제
본문
안녕하세요.
그누보드에서 마우스이벤 클릭에 대한 메뉴 관련 문의 좀할께요
그누보드에서 메뉴를 만들어서 적용시키면 메뉴 현위치를 표시하기위해 해당메뉴에대한 링크와 색상을 적용하는데 정지가 않되던데요
무슨 이런경우가 다 있나 싶어 문의 드립니다.
예를 들어
메뉴 1
메뉴 2
여기서 메뉴1을 클릭하면 메뉴바탕색이 멈춰야하는데 않되더라구요
또반대로 바탕색을 나오겠끔 적용시키면 해당메뉴 링크가 않되구요.
뭔이런경우가 있죠? 되면 되지 않되면않되지. 해야하는데.....
둘중 한가지 만 적용이 되요...아무리 이래저래 막고 풀고 해봐도 않되더라구요;;;
왜 그누보드에서 이렇는건지 이유를 알고 싶습니다. 더불어 둘다 되는 팁이 있다면 조언좀 부탁드립니다.
답변 4
어딘가 문법 오류가 있을거에요.
URL 공개 전에는 이렇다할 조언을 드리기 어렵네요.
말로는 현 상황을 이해하기 어렵습니다.
그리고 위 내용은 모두 그누에서 구현 가능한 부분입니다.
스크립트 사용중이라면 f12 누르셔서 콘솔탭에서 선행 오류가 있는지 채크해보시고
문법도 다시한번 확인해보시기 바랍니다.
어떤 상황인지 이해가 안 가서 그림으로 올려주시면 이해가 쉽습니다.
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
var menuItems = document.querySelectorAll(".submenu a, .subsubmenu a");
var activeMenuItemID = localStorage.getItem("activeMenuItemID");
menuItems.forEach(function(item) {
item.addEventListener("click", function(event) {
// 클릭한 메뉴 클래스 추가
menuItems.forEach(function(menuItem) {
menuItem.classList.remove("active");
});
this.classList.add("active");
// 클릭한 메뉴의 ID를 저장
var menuID = this.getAttribute("data-submenu");
localStorage.setItem("activeMenuItemID", menuID);
// 클릭 이벤트 기본 동작 중지
event.preventDefault();
// 클릭한 메뉴 URL 가져오기
var url = this.getAttribute("href");
window.location.href = url;
});
});
// 저장된 메뉴 ID가 있으면 클래스 추가
if (activeMenuItemID) {
var activeMenuItem = document.querySelector("[data-submenu='" + activeMenuItemID + "']");
if (activeMenuItem) {
activeMenuItem.classList.add("active");
}
}
});
function display_submenu(num) {
document.getElementById("mysub" + num).style.display = "block";
}
</script>
여기서 보면 정상적으로 해당메뉴로 이동이 됩니다.
그렇나 메뉴 클릭한 색이 리셋이 되버린다는거죠..당연하겠죠?
var url = this.getAttribute("href");
window.location.href = url;
그렇나 지우게 되면은 ....반대로 버튼은 정상적으로 메뉴클릭하면 됩니다.
반대로 해당 페이지로 가지를 못합니다.
마우스로 버튼 경로를 확인해보면 정상적으로 링크를 가리키는되도 페이지가않열린다는거에요
즉
저의 의도는 클릭하였을경우 해당 페이지가 열리는 동시에 메뉴 색 또한 멈춰야 하는데 두가지중에 한가지만 먹힙니다. ..난감...
다른곳에서도 아니 일반 적으로 메뉴를 만들어서 테스트 해보왔는데 링크만 걸리면 메뉴가 않되고. 메뉴가 정상이면 반대로 링크가 안걸리고.. 그렇더라구요... 분명 코드는 이상이 없는데도 그래요.
