Question

我的HTML移动应用程序存在这个非常奇怪的问题，过去2天我真的很难过。首先，我正在开发一个移动应用程序，它在左上角有一个Facebook类型的垂直菜单。

我将click事件绑定到上面所说的垂直菜单项的menuOption，以执行ToggleClass（“hide”）方法。虽然事件完美无法在UI端看到任何变化，但是当我检查DOM时，看起来toggleClass已经完美地工作了。当我给出一个空格键并在外部CSS文件中进行任何类型的更改时，只会加载相应的toggledClass的CSS。

另外一个相关点，NavigationMenu div的CSS DISPLAY属性是绝对的，MainPage是固定的。当我将MainPage的prop更改为relative时，一切正常，但我希望它只是固定的。

类似地，当将toggleEvent绑定到主页面中的按钮时，只有当click事件被绑定到NavigationMenu div元素中的menuoptions时才会工作

<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()，为什么还需要 index 跨度？

ToggleClass隐藏不触发CSS事件

1 个答案:

JS

CSS