>source

JS 요소(아코디언 스타일)를 사용하여 다소 기본적인 탐색 메뉴를 만들려고 합니다.

JS가 깨지면서 생각이 멈춘 것 같다.

function subMenu(e) {
  alert(e);
}
function jsDetect() {
  var subs= document.getElementsByClassName('sub-nav');
  for (var i= 0; i < subs.length; ++i) {
    var item= subs[i];
    item.classList.add('hide');
  }
  const divs= document.querySelectorAll('.sub-link');
  divs.forEach(el=> el.addEventListener('click', function(r) {
    r.preventDefault();
    subMenu(el);
  }), false);
}
window.onload= jsDetect;

ul.nav {
  text-transform: uppercase;
  background: rgba(0, 0, 0, 1);
  color: white;
}
ul.nav a:link {
  color: white;
  text-decoration: none;
  display: block;
  padding: 0.3em;
}
ul.nav,
ul.nav li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
ul.nav li {
  padding: 0.55em;
}
.main-nav {
  font-weight: bold;
  font-family: 'Source Sans Pro Black', sans-serif;
  border-top: 1px solid white;
}
.sub-nav {
  background: rgba(255, 255, 255, 0.1);
}
.sub-nav a:hover {
  background: rgba(255, 255, 255, 0.3);
}
.sub-nav.hide {
  display: none;
}
.sub-nav.show {
  display: block
}

<ul class="nav">  <li class="main-nav" id="home-nav"><a href="home">home</a></li>  <li class="main-nav" id="articles-nav"><a href="food" class="sub-link">food</a></li>  <li class="sub-nav articles-sub-nav hide"><a href="food/add">add</a></li>  <li class="sub-nav articles-sub-nav hide"><a href="food/list">list</a></li>  <li class="main-nav" id="articles-nav"><a href="articles" class="sub-link">articles</a></li>  <li class="sub-nav articles-sub-nav hide"><a href="articles/add">add</a></li>  <li class="sub-nav articles-sub-nav hide"><a href="articles/list">list</a></li>  <li class="main-nav" id="assistance-nav"><a href="assistance">assistance</a></li></ul>

위는 잘 작동하고 "sub-link" 클래스가 포함되어 있을 때 클릭한 링크의 전체 URL을 포함하는 경고 상자를 표시합니다.

하지만 내가 정말 필요한 것은 URL의 마지막 부분(예: "food" 또는 "articles")을 알려주는 것입니다.

e.lastIndexOf('/')substr()조합을 subMenu 함수에 추가하여 생각했지만 다음 오류가 발생합니다.

e.lastIndexOf는 함수가 아닙니다.

매우 혼란스럽습니다. 귀하의 모든 도움에 감사드립니다.

해당 code(e.lastIndexOf(...))가 없는 것 같기 때문에 code에서 무슨 일이 일어나고 있는지 정확히 말하기는 어렵지만 e는 문자열이 아니라고 가정합니다.

David Thomas2022-02-07 03:27:13
  • 이전 java : 루트 외에 여러 로거를 사용할 때 log4j2 클래스 이름
  • 다음 javascript : Azure Portal 함수 오류: Microsoft.Azure.WebJobs.Extensions.EventHubs에 대한 NuGet 패키지 참조 업데이트