单击具有两个功能的操作:添加/删除类和切换属性值

Question

我正在研究一个带有嵌套锚链接的锚链接列表，并想做几件事。

单击链接时：

1. 添加“当前”类
2. 从任何其他链接或嵌套链接中删除"current“类
3. 如果项有子项，则切换数据-属性的值(即数据-子=“可见”或数据-子=“隐藏”)。
4. 锚链应该还能工作

请注意，对于我来说，“数据-子”属性是在父a.link上还是在div.children上并不重要。

HTML

<ul>
    <li><a href="#l1" class="link">Level 1</a></li>
    <li><a href="#l2" class="link" data-children="hidden">Level 2</a>
        <div class="children">
            <ul>
                <li><a href="#l2-1" class="link">Level 2.1</a></li>
                <li><a href="#l2-2" class="link" data-children="hidden">Level 2.2</a></li>
                <li><a href="#l2-3" class="link">Level 2.3</a></li>
            </ul>
        </div>
    </li>
    <li><a href="#l3" class="link">Level 3</a></li>
</ul>

JavaScript

let el = document.querySelectorAll('.link');
for (let i = 0; i < el.length; i++) {
  el[i].onclick = function() {
    let c = 0;
    while (c < el.length) {
      el[c++].className = 'link';
    }
    el[i].className = 'link current';

    let x = el.getAttribute('data-children');
    if (x === 'visible') {
      el.setAttribute('data-children', 'visible');
    } else {
      el.setAttribute('data-children', 'hidden');
    }
  };
}

预期的结果是允许任何链接成为“当前”链接，并允许将显示切换到任何或所有子链接。

单击父链接将添加class=“链接当前”，并将属性切换到数据-子代=“可见”。再次单击父链接将将属性切换到data- still =“隐藏”，并且该链接仍然具有class=“链接当前”。

Answer 1

试试这个：

​

let el = document.querySelectorAll('.link');
    for (let i = 0; i < el.length; i++) {
        el[i].onclick = function() {
            let c = 0;
            while (c < el.length) {
            el[c++].className = 'link';
            }
            el[i].className = 'link current';
            
            // toggle data-children attribute for clicked link and childs
            var hidden_node = el[i].parentNode.querySelectorAll('[data-children=hidden]');
            var visible_node = el[i].parentNode.querySelectorAll('[data-children=visible]');

            for (let i = 0; i < hidden_node.length; i++) {
                hidden_node[i].setAttribute('data-children', 'visible');
            }

            for (let i = 0; i < visible_node.length; i++) {
                visible_node[i].setAttribute('data-children', 'hidden');
            }
        };
    }

<ul>
    <li><a href="#l1" class="link">Level 1</a></li>
    <li><a href="#l2" class="link" data-children="hidden">Level 2</a>
        <div class="children">
            <ul>
                <li><a href="#l2-1" class="link">Level 2.1</a></li>
                <li><a href="#l2-2" class="link" data-children="hidden">Level 2.2</a></li>
                <li><a href="#l2-3" class="link">Level 2.3</a></li>
            </ul>
        </div>
    </li>
    <li><a href="#l3" class="link">Level 3</a></li>
</ul>

​