CODEWITHSUNDEEP
jqueryhtmlinternet-explorer
NominalAeon
NominalAeon

Reputation: 604

IE not toggling from list item trigger

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!

Upvotes: 1

Views: 70

Answers (1)

Kevin B
Kevin B

Reputation: 95018

Your HTML is invalid, IE is most likely fixing it for you in a way that breaks the code.

Make your html valid.

<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();
});

Upvotes: 3

Related Questions