0

ナビゲーション バーと非表示のサブ ナビゲーション バーがあります。Page2 をクリックすると、非表示のバーが表示されます (slideToggle を使用)。ここまでは順調ですね。ここでクライアントは、サブ ナビゲーション バーが表示されているときに、Page3 または Page1 をもう一度クリックして、Page2 を再度クリックするまでサブ ナビゲーション バーが表示されたままになることを望んでいます。これには Cookie が必要であることを知っています。JS Cookie を使用するのはこれが初めてなので、自分で作成しようとしましたが、手間がかかりませんでした。誰かがこのjQueryスクリプトの実行方法を知っていると確信しています

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
</head>
<body>
<nav>
    <ul>
        <li><a href="index.html">Page1</a></li>
        <li id="item"><a href="#">Page2</a></li>
        <li><a href="page3.html">Page3</a></li>
    </ul>
</nav>
<br /><br />
<ul id="sub-nav">
    <li><a href="#">Subpage1</a></li>
    <li><a href="#">Subpage2</a></li>
    <li><a href="#">Subpage3</a></li>
</ul>
</body>

CSS:

<style type="text/css">
    *{margin: 0; padding: 0;}
    ul{list-style:none; font: 20px; float: left;}
    ul li{float: left; margin-right: 20px;}
    #sub-nav{font:14px; display: none;}
</style>

jQuery:

<script type="text/javascript">
    $(document).ready(function(){
        $('#item').click(function(){
            $('#sub-nav').slideToggle('fast');          
        });
    });
</script>
4

1 に答える 1