动画div在单击时在另一个div上重叠,然后在单击时返回到上一个div

时间:2013-09-13 20:21:27

标签: jquery html

尝试在点击时在div之间导航(使用动画从侧面滑出)。我有点工作了,但是当你回到主菜单时我需要它“重新开始”,它目前还没有。

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

有关更好的清洁方式的任何建议都会非常感激。到目前为止,这是我正在使用的代码:

HTML

<div class="triggerBox"><a href="#" id="trigger">≡</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/

提前致谢。

1 个答案:

答案 0 :(得分: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&lt; 10。

,你可以在没有jquery的情况下完成大部分工作