Question

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

以下是Code Pen示例： http://codepen.io/sdejaneiro/pen/BjEVBQ?editors=1000

在这个例子中，我想要做的是，当点击＆＃34;第1部分项目C＆＃34; （或第2部分项目C或第3部分项目）（其中包含类series）我想在其下方显示子项（包含在ul列表中的类seriesSet和hidden。我已经将点击甚至连接到班级series的每个实例，但我不确定如何定位正确的seriesSet。我尝试使用forEach附加到seriesSet的每个实例，但最终同时触发了该类的所有ul列表。

我想尽量保持代码尽可能干净，所以我避免在seriesSet列表中添加id，但是我可能需要类似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"
  })
});

Answer 1

这应该做你要求的

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

Answer 2

另一种方法是使用jQuery：

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

编辑：对不起，我还没看过第一句......：/

Answer 3

使用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-tag这样的元素中的列表项文本，这样就可以防止子项切换菜单。

Answer 4

也许是这样的

CodePen

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

Answer 5

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

（另见this Fiddle）

JavaScript - 根据点击事件切换类

5 个答案: