0

尝试在单击时在 div 之间导航（使用动画从侧面滑出）。我已经让它工作了，但是当你回到主菜单时，我需要它“重新开始”，它目前不这样做。

现在您可以单击菜单图标（由于某种原因您必须单击两次）以打开侧面菜单。然后，如果您单击“更多文章>”，则会出现下一个菜单。单击顶部的 << 箭头将带您返回主菜单，但如果您再次尝试单击“更多文章 >”，它不会打开。另外，如果您一起关闭菜单并尝试重新打开它，它也不起作用......

任何有关更好更清洁方法的建议将不胜感激。到目前为止，这是我正在使用的代码：

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 过渡？如果您不需要支持 IE <10，您可能无需 jquery 即可完成大部分操作。

于 2013-09-13T20:50:08.047 回答