JavaScript - 基于单击事件切换类

JavaScript - Toggle classes based on click event

本文关键字：事件 单击 于单击 JavaScript      更新时间：2023-09-26

在使用jQuery之后，我正在努力改进我的JavaScript。我正在尝试根据用户单击的内容切换元素列表的可见性。

下面是一个代码笔示例：http://codepen.io/sdejaneiro/pen/BjEVBQ?editors=1000

在示例中，我想做的是，当单击"第 1 部分项目 C"(或第 2 部分项目 C 或第 3 部分项目((具有类 series(时，我想显示其下方的子项目(包含在包含类 seriesSet 和 hidden 的ul列表中。我已经将单击附加到类series的每个实例，但不确定如何定位正确的seriesSet。我尝试使用附加到每个seriesSet实例的forEach，但这最终一次触发了该类的所有ul列表。

我想尝试保持代码尽可能干净，所以我避免将 id 添加到seriesSet列表中，但也许我确实需要类似的东西用于 JavaScript？

下面是 JavaScript：

NodeList.prototype.forEach = Array.prototype.forEach;
//toggle series lists
document.querySelectorAll('.series').forEach(function(i) {
  i.addEventListener('click', function(e) {
    e.preventDefault();
    //select the correct .seriesSet ul list and remove class "hidden"
  })
});

这应该可以满足您的要求

e.target.children[0].classList.toggle("hidden");

另一种方法是使用 jQuery：

$('.series').click(function () {
   $(this).find('.seriesSet').toogleClass('hidden');
});

编辑：对不起，我没有读第一句话... ：/

使用 firstElementChild 作为单击的列表项元素中 ul 元素的选择器。然后测试隐藏类。

NodeList.prototype.forEach = Array.prototype.forEach;
//toggle series lists
document.querySelectorAll('.series').forEach(function(i) {
  i.addEventListener('click', function(e) {
    var ch = this.firstElementChild;
    e.preventDefault();
    //select the correct .seriesSet ul list and remove class "hidden"
    if (/hidden/.test(ch.className)) ch.className = 'seriesSet';
    else ch.className = 'seriesSet hidden';
  })
});

我会在像span或a标签这样的元素中捕获列表项文本，这样您就可以防止子项切换菜单备份。

也许是这样的

代码笔 

var series = document.querySelectorAll('.series');
for (var i = 0; i < series.length; i++) {
  series[i].addEventListener('click', function(e) {
    e.preventDefault();
    updateSub(this);
  })
}
function updateSub(el) {
  for (var i = 0; i < series.length; i++) {
    if (series[i] == el) {
      el.childNodes[1].classList.toggle('hidden');
    } else {
      series[i].childNodes[1].classList.add('hidden');
    }
  }
}

最干净的方法是做这样的事情：

var tree = document.querySelectorAll('ul.series a:not(:last-child)');
for(var i = 0; i < tree.length; i++){
    tree[i].addEventListener('click', function(e) {
        var parent = e.target.parentElement;
        var classList = parent.classList;
        if(classList.contains("open")) {
            classList.remove('open');
            var opensubs = parent.querySelectorAll(':scope .open');
            for(var i = 0; i < opensubs.length; i++){
                opensubs[i].classList.remove('open');
            }
        } else {
            classList.add('open');
        }
    });
}
body {
    font-family: Arial;
}
ul.series li {
    list-style-type: none;
    position: relative;
}
ul.series li ul {
    display: none;
}
ul.series li.open > ul {
    display: block;
}
ul.series li a {
    color: black;
    text-decoration: none;
}
ul.series li a:before {
    height: 1em;
    padding:0 .1em;
    font-size: .8em;
    display: block;
    position: absolute;
    left: -1.3em;
    top: .2em;
}
ul.series li > a:not(:last-child):before {
    content: '+';
}
ul.series li.open > a:not(:last-child):before {
    content: '-';
}
<ul class="series">
  <li><a href="#">Part 1</a>
    <ul>
      <li><a href="#">Item A</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item B</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item C</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item D</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item E</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Part 2</a>
    <ul>
      <li><a href="#">Item A</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item B</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item C</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item D</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item E</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Part 3</a>
    <ul>
      <li><a href="#">Item A</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item B</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item C</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item D</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item E</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

(另见这首小提琴(

相关文章：