根据先前的类名有选择地隐藏链接

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 个链接，包括标题链接）

现在，我隐藏所有非“标题”链接，如下所示：

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