javascript - jquery 在多个 DIV 上滑动效果并嵌入关闭效果

Question

我这里有很多问题，所以请耐心等待，我是一个非常新的 jquery/javascript 用户。

这是我当前的页面http://integratedcx.com/index.php/experience

基本上，我希望每个项目和项目类别都有隐藏的 div、像抽屉一样的幻灯片，而不仅仅是像现在这样出现。

我尝试通过jquery实现这一点，但没有取得太大成功，这是我的工作http://integratedcx.com/temp/slide.html

1. 如何让一个开口下方的 div 变得“缓和”向下而不是跳跃
2. 如何让最近项目中的关闭功能(橙色框)正常工作
3. 如何隐藏图像右侧的项目列表(就像在当前页面上一样)并具有抽屉打开效果。
4. 是否有一种简单的方法，即使用 jquery 将变量分配给多个 div。

提前感谢您提供的任何/所有帮助。

Answer 1

对于你的问题4，通过下面的脚本(基于上面的ComputerArts's answer)，可以轻松给大量的div添加幻灯片效果:

$(document).ready(function () {
    $(".toggle-to-show").click(function (evt) {

      var targetdiv = $(evt.currentTarget).attr("data-drawer");

      $(targetdiv).slideToggle(1000, function() {
            if ($(this).is(':visible')) {
                $('.bracket', evt.currentTarget).html('less');
                $('.project', evt.currentTarget).hide();
                $('.closebox', this).bind('click', function(e) {$(evt.currentTarget).triggerHandler('click');});
            }
            else {
                 $('.bracket', evt.currentTarget).html('more');
                 $('.project', evt.currentTarget).show();
                 $('.closebox', this).unbind('click');
            }
      });
   })

})

然后，您可以按如下方式标记切换按钮和 slider :

<div class="toggle-to-show" data-drawer="#firstsection">
     <div class="project">Project One Heading</div>
     <div class="bracket">more</div>
</div>

<div id="firstsection">
     <h3>Project One Heading</h3>
     stuff
     <img class="closebox" src="close.jpg">
</div>

<div class="toggle-to-show" data-drawer="#secondsection">
     <div class="project">Project Two Heading</div>
     <div class="bracket">more</div>
</div>

<div id="secondsection">
     <h3>Project Two Heading</h3>
     stuff
     <img class="closebox" src="close.jpg">
</div>


<div class="toggle-to-show" data-drawer="#thirdsection">
     <div class="project">Project Third Heading</div>
     <div class="bracket">more</div>
</div>

<div id="thirdsection">
     <h3>Project Three Heading</h3>
     stuff
     <img class="closebox" src="close.jpg">
</div>