改变“顶部”带有 jQ​​uery 单击的绝对定位元素的 css

Question

我有一个 div (#slider)，我正在使用position:absolute;允许它跨越屏幕的宽度，而不必破坏我的包装器代码。但是，我有一个菜单，可以使用 jQuery slipToggle 单击“工作”div 进行切换。我想调整绝对定位元素的“top”属性，以便当我的菜单向下滑动时它会向下移动。

这可以在 http://osephj.com/dev/ 上实时查看，

这一切都使用自适应媒体查询，显然，通过 jQuery 点击触发的 CSS 需要包含媒体查询，以便顶部位置适用于所有屏幕尺寸。

现在，我用于切换菜单的代码是这样的：

    <script type="text/javascript">
 $(document).ready(function() {
$('#worktoggle').click(function(){
     $('div.slider').css('top', 700);
     $('div.work').slideToggle(600,'swing');
     return false;
   });
});
</script>

现在正在重新定位 .slider div，但我需要能够更改每个媒体尺寸的值。另外，我希望它能够与菜单中的 600 速度的“摇摆”过渡相匹配。基本上，如果它是在同一父元素中跟随我的“工作”UL 的块元素，它将如何操作。

Answer 1

css 方法可能就是您所寻找的。

$('#').css('top', 1000);

或 addClass 和 removeClass 将您自己的类添加到元素中。

您可能需要查看 slideDown 过渡动画方法。

您希望将此代码添加到您的 click 函数中，因为您希望它更改 onclick。

$('#worktoggle').click(function(){
    $('div.toMove').css('top', 100);
    $('div.work').slideToggle(600,'swing');
     return false;
});