Question

美好的一天，我正在建立一个网站，我想让一个div向下移动并单击一下（点击另一个div区域）。它将页面的标题与内部的帐户图像相关联（标题包含从左到右：徽标，水平菜单，购物车和帐户符号）

当我点击帐户符号时，我希望标题向下滑动（60像素），我想要另一个div（其中包含帐户相关链接）显示在刚下滑的标题上方。我已经取得了一些成就，但我对此并不满意：

<script>
    jQuery(document).ready(function($){
        $(".account").click(function);
            $("#accountbar").slideToggle( "slow");
            $("#topheader").toggleClass("topheader topheaderdown");
            $("#contentarea").toggleClass("content contentdown");
        });
    });
</script>

1）所以它会加载新的帐户栏（高度为60px）并将其向下滑动。

2）它显示另一个60px的topheader（css样式规则顶部：60px）

3）当显示帐户栏和topheader时，它还显示其余内容（主要内容）比正常低120个像素（默认情况下，此值为60px，因此仅适用于topheader）

点击帐户图片后，我希望“平滑”地向下滑动并备份。我得到了这么远（为了顺利地向下移动头顶部分）：

<script>
    jQuery(document).ready(function($){
        $("#account").on('click',function(){
            $("#accountinner").toggle(function() {
                $("#topheaderid").animate({ top: '-=60px' }, 500);
            },function() {
                $("#topheaderid").animate({ top: '+=60px' }, 500);
            })
        });
    });
</script>

问题1：上面只是每次点击它时都会进一步向下移动topheader（不再按照规定再次向上移动60px）......

问题2：上面也以某种方式将我的帐户图像向右滑动（屏幕外）

我也希望在此实施其他规则，以便在点击时，topheader可以平滑地向下移动60px，在顶部显示新div（帐户栏）中的帐户导航和内容（类内容））向下移动60px。如前所述，使用“slidetoggle”和“toggleclass”可以工作，但我更喜欢“动画”功能，因为这看起来很棒。我已经从第一个脚本实现了这些规则，但它并没有“顺利”地发生，并且topheader只是继续下去......

我希望这是足够的信息，有人可以帮助:) 当这个工作时，我想用一个搜索按钮来扩展它，并在点击时出现在topheader下面。

https://jsfiddle.net/d14tcb9n

感谢。

Answer 1

您可以触发动画，例如：

jQuery(document).ready(function($){
  $("#account").on('click',function(){
  if($(this).hasClass('open')) {
         $("#topheaderid").animate({ top: '0' }, { duration: 500, queue: false });
        $("#accountbar").animate({ height: '0' }, { duration: 500, queue: false });
        $('#contentid').animate({ marginTop: '60px' }, { duration: 500, queue: false });
        $(this).removeClass('open');   
  } else {
        $("#topheaderid").animate({ top: '60px' }, { duration: 500, queue: false });
        $("#accountbar").animate({ height: '60px' }, { duration: 500, queue: false });
        $('#contentid').animate({ marginTop: '120px' }, { duration: 500, queue: false });
        $(this).addClass('open');  
  }


  });
});

从隐藏的div中删除display none，并将高度更改为0 演示：https://jsfiddle.net/o1cvho6m/

DIV使用javascript上下移动

1 个答案: