jQuery 切换未能隐藏 ul 元素

如何解决jQuery 切换未能隐藏 ul 元素

此 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 中可见的所有 ul 项的所有“innerText”。

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

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

并且这个值不会像innerText一样在点击之间改变。

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