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

我有7个按钮。它们分布在背景图像的顶部并与其进行交互。他们绝对放置。我创建了一个jQuery函数来为其中一个按钮高度设置动画。按钮向上扩展。点击这里查看：http://hdpano.no/bf/newindex.html并点击左上角的按钮8。一个功能来规则多个按钮，然后一些

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

这里是jQuery代码：

jQuery(document).ready(function() { 

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

}); 

});

功能是很基本的，我已经剥夺我所有的努力，使之与其他按钮的工作吧。

来源

2012-02-02 Studiostefan

这就是你要找的。在此您的网页代码替换...

<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与类“链接”。

来源

2012-02-02 11:33:39 Archer

谢谢。现在我走在正确的轨道上！ – Studiostefan 2012-02-02 11:40:54

我刚刚在重读您的问题后进行了更改。当您打开新的按钮时，它现在会关闭打开的按钮。 – Archer 2012-02-02 11:44:09

我使用了这段代码。非常感谢你。我也尝试添加一些背景动画。 $（this）.animate（{“backgroundColor”：“rgba（203，54，191，。4）“}，500）但它不起作用，任何提示？或者我应该打开一个新的线程？ – Studiostefan 2012-02-02 18:25:31

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

来源

2012-02-02 11:29:39

this在切换功能将是被点击的元素。

这里是我会做什么：

删除<br/>标签。使用边距/填充来实现间距。
基本上你想展开/折叠包含<ul>的高度的元素“.link”（容器）。
使用“+ =”或“ - =”与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

来源

2012-02-02 11:36:22

非常感谢你，我尝试了.parent，但从来没有按照我想要的方式工作，这看起来很棒，我会尽量实现它，然后我会D – Studiostefan 2012-02-02 11:39:00

我已经改变了一下代码：颠倒了两个切换函数（当按钮开始折叠）和计算'h'。检查更新的提琴 – 2012-02-02 11:51:34

你已经完成了我原本做了什么，并且在打开新的按钮时错过了关闭任何打开的按钮的位置。 – Archer 2012-02-02 12:18:38

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

回答

相关问题