0

クリック時に div 間を移動しようとしています (アニメーションを使用して横からスライドします)。多少は動作するようになりましたが、メイン メニューに戻ったときに「最初からやり直す」必要がありますが、現在はそうではありません。

現在、メニュー アイコン (何らかの理由で 2 回クリックする必要があります) をクリックして、サイド メニューを開くことができます。次に、「その他の記事 >」をクリックすると、次のメニューが表示されます。上部の << 矢印をクリックするとメイン メニューに戻りますが、もう一度 [その他の記事 >] をクリックしても開きません。また、メニューをまとめて閉じて再度開こうとしても、うまくいきません...

これを行うためのよりクリーンな方法に関する提案は大歓迎です。これまでのところ、これは私が使用しているコードです:

HTML

<div class="triggerBox"><a href="#" id="trigger">≡&lt;/a>
</div>
<div class="menu">
        <h2>Programs</h2>

    <ul>
        <li><a href="#">Page</a>
        </li>
        <li><a href="#">Page</a>
        </li>
        <li><a href="#">Page</a>
        </li>
    </ul>
        <h2>Pages</h2>

    <ul>
        <li><a href="#">Page</a>
        </li>
        <li><a href="#">Page</a>
        </li>
        <li><a href="#">Page</a>
        </li>
        <li><a id="interior-trigger" href="#">Page with Children > </a>
        </li>
    </ul>
        <h2>College</h2>

    <ul>
        <li><a href="#">Full Site</a>
        </li>
        <li><a href="#">Apply</a>
        </li>
    </ul>
</div>
<div class="interior-menu">
        <h2><a id="back" href="#"><<</a>Articles</h2>

    <ul>
        <li>Article</li>
        <li>Article</li>
        <li>Article</li>
        <li>Article</li>
        <li>Article</li>
        <li>Article</li>
    </ul>
</div>

CSS

 body {
    font-family:"Open Sans Condensed", sans-serif;
    font-size:12px;
}
.menu, .interior-menu {
    position:fixed;
    top:0px;
    right:-360px;
}
.interior-menu {
    display:none;

.menu ul, .interior-menu ul {
    display:block;
    list-style-type:none;
    width:300px;
    height:100%;
    padding:0px;
    margin:0px;
}

そして私のスクリプト

// slide open and close the main menu
$("#trigger").click(function () {
    $(".menu").animate({
        "right": "0px",
            "width": 'toggle'
    },
    100);
});
//hide the interior menu
$("#interior-menu").hide();

//after clicking on a page with children, slide out the main panel
$("#interior-trigger").click(function () {
    $(".menu").animate({
        "right": "0px",
            "width": "0px"
    },
    30);

    //slide out the parent page's child menu 
    $(".interior-menu").animate({
        "right": "0px",
            "width": 'toggle'
    },
    30);
});

フィドルを参照してください: http://jsfiddle.net/j4N38/

前もって感謝します。

4

1 に答える 1

0

これを見てください...そして、テストできるようにjsfiddleをフォークしました。 http://jsfiddle.net/ZLHMf/

// slide open and close the main menu
$("#trigger").on('click', function(e) {
    e.preventDefault();
    $(".menu").animate({
        "right": "0px",
        "width": 'toggle'
    },
    100);
});
//hide the interior menu
//$("#interior-menu").hide();

//after clicking on a page with children, slide out the main panel
$('.menu').on('click', '#interior-trigger', function(e) {
    e.preventDefault();
    $(".menu").animate({
        "right": "0px",
        "width": "0px"
    },
    30);

    //slide out the parent page's child menu 
    $(".interior-menu").animate({
        "right": "0px",
        "width": 'toggle'
    },
    30);
});


// click the back button to reveal the slide main panel again
$('.interior-menu').on('click', '#back', function(e) {
    e.preventDefault();
    //slide out the interior panel
    $('.interior-menu').animate({
        "right": "0px",
        "width": "toggle"
    }, 30);
    //slide in the main panel again
    $(".menu").animate({
        "right": "0px",
        "width": '300px'
    },
    100);
});

編集：

CSS トランジションの使用について考えたことはありますか? 10 未満の IE をサポートする必要がない場合は、おそらく jquery を使用しなくても、このほとんどを実現できます。

于 2013-09-13T20:50:08.047 に答える