ToggleClass隐藏不触发CSS事件

I have this very weird problem with my HTML mobile app which am really breaking my head for past 2 days. To start with am working a mobile app which have Facebook kind vertical Menu on the Left top.

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

I am binding click event to a menuOption from the above said vertical menu item to perform ToggleClass("hide") method. Though the event does the job perfectly am not able to see any changes in the UI side, but when I checked the DOM it seems the toggleClass has worked perfectly. When I give a spacebar and do any sort of changes in the External CSS file then only correponding CSS of toggledClass is loaded.

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

Also one more relevant point, CSS DISPLAY property for NavigationMenu div is absolute and MainPage is Fixed. When I change the prop of MainPage to relative everything works fine, but I want it to be Fixed only.

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

Similarly when am binding the toggleEvent to a button in the main page also its working, only when the click event is binded to the menuoptions in NavigationMenu div element

类似地,当将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 code

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

On a whole I would like to know why the toggleClass,addClass,removeClass are not triggering the CSS properties once the DOM was changed?

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

1 个解决方案

#1

Here is a working solution: http://jsfiddle.net/L6rd57gk/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;
}

Why don't you put details inside the span, or put a data- identifier so you don't have to use .next(), also why do you need the index of the span?

为什么不将详细信息放在span中,或者放入数据标识符以便不必使用.next(),为什么还需要span的索引?

#1