javascript - 一个功能来统治多个按钮，然后是一些

Question

我有 7 个按钮。它们分布在背景图像之上并与之交互。它们是绝对放置的。我创建了一个 jQuery 函数来为其中一个按钮的高度设置动画。按钮向上扩展。在这里查看:http://hdpano.no/bf/newindex.html然后点击左上角名为 Deck 8 的按钮。

我希望这个函数能够处理所有的按钮，但是有一些变数。每个按钮的基线各不相同，我需要在扩展高度时从中减去基线。如果单击另一个按钮，我还希望关闭任何其他打开的按钮。

这是 jQuery 代码:

jQuery(document).ready(function() {

$('#link8').toggle(
function()
{
  $('#deck8').animate({height: "25px",top:"202"}, 500);
},
function()
{
$('#deck8').animate({height: "150",top:"76"}, 500);

});

});

该功能非常基本，我已经放弃了让它与其他按钮一起工作的所有尝试。

Answer 1

这可以满足您的需求。将您页面中的代码替换为...

<script type="text/javascript">
    jQuery(document).ready(function() {
        $('.link').click(function() {
            var $me = $(this);
            if ($me.height() == 150) {
                $me.animate({height: "25px",top:"+=126"}, 500);
            } else {
                $(".link").each(function() {
                    if ($(this) != $me) {
                        if ($(this).height() == 150) {
                            $(this).animate({height: "25px",top:"+=126"}, 500);
                        }
                    } 
                });
                $me.animate({height: "150px",top:"-=126"}, 500);
            }
        });
    });
</script>

您可以使用 += 和 -= 切换位置，因此它使用相对定位，而不是绝对定位，这样代码会影响页面上所有类为“链接”的 div。