next() not picking up an inner UL with “display: none” in IE7

问题

This is happening with the following markup:

<ul id="sideMenu" class="menuFontStyle">
<li class="category">Test</li>
<ul class="secondLevel" style="display: none;">
<li></li>
</ul>
...

In FF and Chrome the inner UL is being picked up but IE7 seems to be skipping to the next li. What could serve as a workaround? This is with a custom accordion script.

回答1:

Your ul is not inside the li as you have closed the li before opening the ul. I don't think this is what you want.

Then, to access the <ul> you are far better using .find so it would be $("li").find("ul") as this will access the <ul> inside the <li> only.

<ul id="sideMenu" class="menuFontStyle">
    <li class="category">Test
        <ul class="secondLevel" style="display: none;">
            <li></li>
        </ul>
    </li>
</ul>

回答2:

That is invalid HTML, so you shouldn't be surprised at bizarre results. ul elements may not have other ul elements as direct children; they may only contain li elements. IE7 presumably wraps the ul in another li or something similar to make it valid.

Make your HTML valid: this will help browsers to transform it into the DOM structure that you intend and your JS coding will be a lot easier.

来源：https://stackoverflow.com/questions/10723372/next-not-picking-up-an-inner-ul-with-display-none-in-ie7