javascript - jQuery 切换无法隐藏 ul 元素

Question

这个 Meteor 代码应该显示和隐藏一个<ul id="Bulb">元素。第一次触发的事件显示元素，但再次单击时无法隐藏它。

请注意console.log($('#' + category))显示这两个事件的浏览器图像。知道为什么第二次单击不隐藏元素以及如何使其隐藏在第二个事件中以使切换起作用吗？

谢谢你。

  'click .category': function(e){
    let category = e.target.innerText
    $('#' + category).toggle()
    console.log($('#' + category))
  }

.horizontal {
  display: inline;
}
.group, .subGroup {
  display: none;
}

          <li class="category" data-category={{category}}> <img src="/{{category}}.svg"/>{{category}}
            
            <ul id={{category}} class="no-bullets group">
              <!-- the last word is the argument passed to the helper function -->
              {{#each categories category}} 
              <li class="horizontal" data-category={{category}}>{{this}}</li>
              {{/each}}
            </ul>

修复但有不必要的副作用

原因是第一次点击给出的值e.target.innerText与第二次点击得到的值不同。

第二个值包括li现在在 child 中可见的所有项目的所有“innerText” ul。

所以let category = e.target.innerText我没有使用：

let category = e.target.getAttribute('data-category')

并且此值不会像 innerText 一样在单击之间发生变化。

这样做的问题副作用是单击li子元素内的元素ul会触发切换，这不是我想要的。

标签： javascriptjquerymeteor-blaze