1

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

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

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

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

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

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

4

3 回答 3

1

对于您的问题4，使用以下脚本（基于ComputerArts上面的回答），您可以轻松地将幻灯片效果添加到大量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');
            }
      });
   })

})

然后，您可以如下标记切换按钮和滑块：

<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>
于 2012-10-18T03:14:07.530 回答
0

至于第 1 点和第 2 点，试试这个小提琴， 我只将第一个脚本标签更改为

<script type='text/javascript'>

$(document).ready(function () {
    $(".projectx-show").click(function () {
        $("#projectx").slideToggle(1000, function() {
            if ($(this).is(':visible')) {
              $('#projectx-bracket').html('less');
            }
            else {
              $('#projectx-bracket').html('more');
            }
        });
    })

})

</script>

仅供参考，您不需要使用$(window).load然后$(document).ready...一个就足够了

至于#3，我不明白你想说什么。

#4，是的，有一种方法，使用类并为页面中的每个块保持相同的结构。

于 2012-10-18T01:35:02.040 回答
0

  1. http://api.jquery.com/slideDown/

    $("#link_id").click(function(){
  $("#div_to_show").slideDown();
});

  2. http://api.jquery.com/slideUp/

    $('#div_to_close').slideUp();

  3. 使用 1 和 2 中的两种方法

  4. 通过使用类名而不是选择器的 ID。例如：

    $(".link_class").click(function(){
  $(this).parentsUntil('.ex-wrapper').find('.div_to_show').slideDown();
});
于 2012-10-18T01:29:32.507 回答