이전 클래스 이름을 기반으로 선택적으로 링크 숨기기

Question

우선 jQuery로 연결하지 말 것을 부탁드립니다. 나는 jQuery를 사용하지 않으며,이 경우에는 사용하지 않을 것이다.

그렇다면 내 목표를 설명 할 수 있는지 알아 보겠습니다. 다음과 같이 내가 링크 목록이 있습니다 등등

<a href="#" class="title">1ST TITLE</a> 
<a href="#">Item 1</a> 
<a href="#">Item 2</a> 
... more items ... 
<a href="#" class="title">2ND TITLE</a> 
<a href="#">Item 1</a> 
<a href="#">Item 2</a> 
... more items ... 
<a href="#" class="title">3RD TITLE</a> 
<a href="#">Item 1</a> 
<a href="#">Item 2</a> 
... more items ... 

을 지금

(전체 목록은 제목 포함한 77 개 링크입니다), 나는 모든 NOT '제목'과 같이 링크를 숨길 수 :

var sideMenu = getElementsByClassName(document, 'sm'); 
var links = sideMenu[0].getElementsByTagName('a'); 
for (i = 0; i < links.length; i++) { 
    if (!hasClass(links[i], 'title')) { 
     links[i].style.display = 'none'; 
    } 
} 

getElementsByClassName 및 hasClass 내가 이것을 위해 작성한 기능입니다.

여기까지 모든 것이 완벽하게 작동합니다.

title 링크 중 하나에 active 클래스가있는 경우, 그 다음에 오는 링크를 숨기고 싶지 않습니다. 2ND TITLE가 active 클래스가 있다면

는 예를 들어, 나는 2ND TITLE의 모든 다음 링크를 표시하고 싶지만, 여전히 1ST TITLE 및 3RD TITLE 링크를 숨 깁니다.

Answer 1

반복 할 때 활성 링크 아래에 현재 링크가 있는지 추적하십시오 : http://jsfiddle.net/8bwyU/1/.

function hasClass(elem, someClass) { // don't know your implementation... 
    return elem.className.indexOf(someClass) !== -1; 
} 

var sideMenu = document.body.getElementsByClassName('sm'), 
    links = sideMenu[0].getElementsByTagName('a'), 
    currentIsActive = false; 

for (var i = 0; i < links.length; i++) { 
    if (!hasClass(links[i], 'title')) { // not a title link 
     if(!currentIsActive) { // only hide if not under an active title link 
      links[i].style.display = 'none'; 
     } 
    } else { // a title link 
     currentIsActive = hasClass(links[i], "active"); 
     // update whether current is active or not 
    } 
} 

Answer 2

마지막으로 성공한 title 링크가 활성 상태인지 여부에 대한 참조를 유지하십시오. 그랬다면, 숨기지 말고 그렇지 않으면해야합니다. 뭔가 같은 : 오직 하나 개의 타이틀이 한 번에 활성 표시, 당신은 당신이 순수 CSS를 찾고있는 무엇을 달성 할 수있다 제공

var sideMenu = getElementsByClassName(document, 'sm'); 
var links = sideMenu[0].getElementsByTagName('a'); 
var isActive = false; 
for (i = 0; i < links.length; i++) { 
    if (hasClass(links[i], 'title') && hasClass(links[i], 'active')) 
     isActive = true; 
    if (hasClass(links[i], 'title') && !hasClass(links[i], 'active')) 
     isActive = false; 
    if (!hasClass(links[i], 'title') && !isActive) { 
     links[i].style.display = 'none'; 
    } 
} 

---

편집 :

a.title ~ a:not(.title) { display: none; } 
a.title.active ~ a:not(.title) { display: inline; } 
a.title.active ~ a.title:not(.active) ~ a:not(.title) { display: none; } 

처음과 마지막이 모두 활성화되어 있으면 여러 활성 제목이 실패합니다 (다른 조합이 작동 함). 또한 귀하의 마일리지는 브라우저 지원에 따라 다를 수 있습니다 : P