Выборочно скрывать ссылки на основе предыдущего имени класса

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 ссылок, включая заголовки)

Теперь я скрываю все ссылки НЕ 'title' следующим образом:

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

Сохраните ссылку на то, была ли последняя переданная ссылка title активной или нет;если это так, то не прячься, иначе делай.Примерно так:

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';
    }
}

---

РЕДАКТИРОВАТЬ Если в любой момент времени только один заголовок помечен как активный, вы можете достичь того, что ищете, с помощью чистого CSS:

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

Answer 2

Во время итерации отслеживайте, находится ли текущая ссылка под активной: 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
    }
}