0

I'm using jquery for a dropdown menu, and to hide an account login area on a website. It works fine in Firefox, Safari, and Chrome on both Windows and Mac, but it does not want to work in IE8. (I have not tested 9 and 10, but it has to run on 8)

Here is a fiddle.

Please ignore the CSS in the fiddle - It's compressed. Obviously, the sub-nav is hidden.

HTML:

<header>
        <a href="/"><h1 class="logo col-4">GreyStone Power Corporation</h1></a>
        <div class="login col-4">
            <form method="post" class="login-form">
                <p>Login to view/pay your bill:</p>
                <fieldset>
                    <div class="rowElem col-6"><input type="text" id="username" name="username" placeholder="Username" class="col-10"/></div>
                    <div class="rowElem col-6"><input type="password" id="password" name="password" placeholder="Password" class="col-10"/></div>
                    <div class="rowElem col-5"><button formaction="#" class="orangeBtn">Log In <span class="arrow-right-icon"></span></button></div>
                    <div class="col-5 right inline register"><a class="block" href="#">Register</a><a class="block" href="#">Forgot Password</a></div>
                </fieldset>
            </form>
        </div><!--  End Account Login  -->
        <nav>
            <ul class="navigation col-10-exact">
                <li>Residential
                    <section class="sub-nav col-12">
                        <ul class="sub-nav-list col-3">
                            <a href="#"><li>View/Pay Bill</li></a>
                            <a href="#"><li>Apply For Service</li></a>
                            <a href="#"><li>Billing/Payment Options</li></a>
                            <a href="#"><li>Pre-paid</li></a>
                            <a href="#"><li>Rates</li></a>
                            <a href="#"><li>Energy Savings</li></a>
                            <a href="#"><li>Member Handbook</li></a>
                        </ul>
                        <div class="nav-info col-9 right">
                            <p>Some Text/Other stuff here.</p>
                        </div>
                    </section>
                </li>
                <li>Commercial
                    <section class="sub-nav col-12">
                        <ul class="sub-nav-list col-3">
                            <a href="#"><li>View/Pay Bill</li></a>
                            <a href="#"><li>Apply For Service</li></a>
                            <a href="#"><li>Billing/Payment Options</li></a>
                            <a href="#"><li>Pre-paid</li></a>
                            <a href="#"><li>Rates</li></a>
                            <a href="#"><li>Energy Savings</li></a>
                            <a href="#"><li>Member Handbook</li></a>
                        </ul>
                        <div class="nav-info col-9 right">
                            <p>Some Text/Other stuff here.</p>
                        </div>
                    </section></li>
            </ul>
            <ul class="account col-2-exact right">
                <li>My Account <span class="icon-acct"></span></li>
            </ul>
        </nav><!--  End Navigation  -->
    </header>

jQuery:

$(document).ready(function(){
    $(".account").click(function(){
        $(".login").fadeToggle(300);
    });
    $(".navigation > li").hover(function(){
        $(this).children(".sub-nav").toggle();
    });
});
4

1 回答 1

2

您需要使用 jQuery 1.x，而不是 2.x。他们在 2.x 中放弃了对旧版本 IE（6、7、8）的支持。

于 2013-10-08T21:15:30.263 回答