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和{{ 1}}链接。

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

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

2 个答案: