0

我正在尝试创建一个包含 3 个列表项的导航面板。单击列表项时，一组相应的链接（子导航）会滑出以显示其自身。

我在这里有一个工作演示：http: //jsfiddle.net/M8fS3/2/

在这个演示中，该技术有效，但它有点错误。单击链接的次数越多，关闭按钮和 (+) 按钮似乎就失去了它们的位置。它们似乎失去了它们的相对定位，并且表现得好像它们是绝对定位的，相对于容器，而不是它们的父级。

我想以不同的方式来写这篇文章，或者看看是否有任何其他开发人员有更好的技术来完成同样的任务。目前我的jquery如下：

$("#serviceBox li a").on("click", function(){
        $(this).animate({
            'left' : -250
        }, {duration: 200, queue: false, easing: 'linear'});

        $(this).next(".panel").animate({
            'left' : 0
        },  {duration: 200, queue: false, easing: 'linear'});
    });

    $("a.closePanel").on("click", function(){
        $(this).parent().animate({
            'left' : 250
        },  {duration: 200, queue: false, easing: 'linear'});

        $(this).parent().prev("a").animate({
            'left' : 0
        },  {duration: 200, queue: false, easing: 'linear'});
    });

我将队列设置为 false，因为我希望动画彼此同步。让我知道您是否想在此处查看 HTML 和 CSS（目前在小提琴中）。提前致谢。

4

1 回答 1

0

关闭和打开按钮失去定位的原因是它们继承了父容器的相对值，从而覆盖了它们的绝对定位。只需添加position:relative即可#serviceBox li .panel a.closePanel修复它！

于 2013-03-26T16:42:27.177 回答