hide( ) method with nested elements (IE7)

[Mark Gajdosik]

Works well in almost everything except for IE7 (and possibly < 7).

<ul id="list" style="display: none;">
  <li>
    <ul id="sublist1" style="display: none;"></ul>
    <ul id="sublist2" style="display: none;"></ul>
  </li>
</ul>

Now following these steps:

1) $('ul#list, ul#list ul').show() displays whole list with all sublists and possible list items.

2) $('ul#list, ul#list ul').hide() hides everything as expected.

3) $('ul#list').show() displays only top list in FF, Opera, Chrome. In IE7, it displays top list with empty sublists (width and height are kept though).

It appears that hide() hides elements only if they're visible. Since hide() (probably) traverses jQuery object from top elements down to the bottom, it does not hide nested elements because top element is hidden first and nested ones are hidden automatically with it.

I'm not really sure, if this is something related to IE7 or a jQuery bug. Anyway, workaround was to hide elements from the bottom up recursively.

[dmethvin]

It may be that IE is being picky about the HTML. UL elements are always supposed to have at least one LI child.

[addyosmani]

This bug is due to incorrectly formatted HTML. Were you to include, as dmethvin correctly suggested LI element(s) inside the ULs you would find that your code should be working. jQuery only supports correctly formatted HTML.

[anonymous]

This is a valid point and has nothing to do with ULs not having LI. This happens if ULs are correctly formatted. Mark experience is exactly what I am facing and the only solution I found is to recursively hide ULs.

Any other suggestions would be helpful.