Question

我使用jquery作为下拉菜单，并隐藏网站上的帐户登录区域。它在Windows和Mac上的Firefox，Safari和Chrome中运行良好，但它不想在IE8中运行。（我没有测试9和10，但它必须在8上运行）

这是fiddle。

请忽略小提琴中的CSS - 它是压缩的。显然，子导航是隐藏的。

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

Answer 1

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

jQuery .hover（）和.click（）事件在IE 8中不起作用

1 个答案: