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。

Answer 2

切换函数中的

this将是单击的元素。

以下是我要做的事情：

删除<br/>标记。使用边距/填充来实现间距。
基本上你想扩展/折叠元素＆＃34; .link＆＃34; （容器）包含<ul>。
使用＆＃34; + =＆＃34;或＆＃34; - =＆＃34;使用animate函数自动添加/删除指定的值。
当您的按钮开始折叠时，您应该反转切换中的两个功能

这里的代码更为通用：

jQuery(document).ready(function() {

    // on click of any link with class ".linkContent"
    $('.linkContent').toggle(
    function() {
            // get the parent ".link" container
        var $parent = $(this).parent(),
            // get the full height of the <ul> to show/hide + the height of the link
            h = $parent.find('ul').outerHeight() + $(this).outerHeight();

        // animate using += and -= to avoid setting explicit values
        $parent.animate({ height: '+=' + h, top: '-=' + h }, 500);
    },
    function() {
        var $parent = $(this).parent(),
            h = $parent.find('ul').outerHeight() + $(this).outerHeight();
        $parent.animate({ height: '-=' + h, top: '+=' + h }, 500);
    });

});

以下演示显示了正在运行的代码。您可能需要稍微调整一下以获得添加/删除的确切高度，但您明白了这一点：

<强> DEMO

Answer 3

您要做的是为每个按钮添加一个类.deck，然后切换.deck'. Inside the toggle function use $（this）`以引用当前按钮。

一个功能来规则多个按钮，然后一些

3 个答案: