jquery - ToggleClass 隐藏不触发 CSS 事件

Question

我的 HTML 移动应用程序遇到了这个非常奇怪的问题，过去 2 天这让我很头疼。首先，我正在开发一款左上角有 Facebook 类垂直菜单的移动应用。

我将点击事件绑定(bind)到上述垂直菜单项中的 menuOption 以执行 ToggleClass("hide") 方法。虽然该事件完美地完成了工作，但我无法在 UI 端看到任何变化，但是当我检查 DOM 时，似乎 toggleClass 工作得很好。当我输入空格键并在外部 CSS 文件中进行任何类型的更改时，只会加载 toggledClass 的相应 CSS。

还有一个相关点，NavigationMenu div 的 CSS DISPLAY 属性是绝对的，MainPage 是固定的。当我将 MainPage 的属性更改为 relative 时，一切正常，但我只想将其固定。

类似地，当我将 toggleEvent 绑定(bind)到主页中的按钮时，它也起作用，仅当点击事件绑定(bind)到 NavigationMenu div 元素中的菜单选项时

<div>
    <span class="header1">Header</span>
    <label class="dtl1 hide  ">Details</label>
    <span class="header2">Header</span>
    <label class="dtl2 hide">Details</label>
</div>

Javascript 代码

$('span').click(function() {
  var selIndex =  $("span").index(event.currentTarget);
  $('label').toggleClass("hide");
});

总的来说，我想知道为什么在更改 DOM 后 toggleClass、addClass、removeClass 不触发 CSS 属性？

Answer 1

这是一个可行的解决方案:http://jsfiddle.net/L6rd57gk/1/

js

$('span').on('click', function() {
  var selIndex =  $(this).index();
    $(this).next().toggleClass("hide");
});

CSS

.hide{
    display: none;
}

span{
    display: block;
    font-weight: bold;
}

为什么不把细节放在跨度内，或者放一个数据标识符这样你就不必使用 .next()，还有为什么你需要 索引 的跨度？