jquery - IE not toggling from list item trigger

Question

jQuery:

$( '#mainNavSidebar .subListTrigger' ).click( function(){
    $( this ).next( '.subList' ).toggle();
});

HTML:

<style>.subList{ display: none; }</style>
<ul id="mainNavSidebar">
    <li class="subListTrigger">
        <a>About Us</a>
    </li>
    <ul class="subList">
        <li><a>Welcome</a></li>
        <li><a>Mission</a></li>
    </ul>
</ul>

So I'm stuck using an older version of jQuery which is why I'm using click() instead of on(). But this is working fine in Chrome and Firefox, but it does nothing in IE. If I put an alert in there it will do that, so I think the problem is with either the next() or the toggle(). Any ideas?

Thanks!

Answer 1

您的 HTML 无效，IE 很可能会以破坏代码的方式为您修复它。

使您的 html 有效。

<style>.subList{ display: none; }</style>
<ul id="mainNavSidebar">
    <li class="subListTrigger">
        <a>About Us</a>
        <ul class="subList"> <!-- the only valid child of a ul is a li -->
            <li><a>Welcome</a></li>
            <li><a>Mission</a></li>
        </ul>
    </li>
</ul>

..

$( '#mainNavSidebar .subListTrigger' ).click( function(){
    $( '.subList', this ).toggle();
});