0

ドロップダウン メニューに jquery を使用し、ウェブサイトのアカウント ログイン領域を非表示にしています。Windows と Mac の両方で Firefox、Safari、および Chrome で問題なく動作しますが、IE8 では動作しません。(9 と 10 はテストしていませんが、8 で実行する必要があります)

ここにフィドルがあります。

フィドルの 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();
    });
});
4

1 に答える 1

2

2.x ではなく、jQuery 1.x を使用する必要があります。2.x では古いバージョンの IE (6、7、8) のサポートが終了しました。

于 2013-10-08T21:15:30.263 に答える