jQuery的$(document).ready() 网页打开直接展开滑动第一块,当点击第二块时,第二块滑动展开,并且第一块收回滑动
时间: 2024-03-16 13:45:25 浏览: 10
你可以使用jQuery的`click()`方法来实现点击后滑动展开的效果。下面是一个示例代码:
```
$(document).ready(function(){
// 默认展开第一块
$("#block1").slideDown(1000);
// 点击第二块时,展开第二块并收回第一块
$("#block2").click(function(){
$("#block1").slideUp(500);
$("#block2").slideDown(1000);
});
});
```
在这个例子中,当页面加载完成后,第一块`#block1`默认展开。当点击第二块`#block2`时,第一块将向上滑动收回,同时第二块将向下滑动展开。你可以根据需要自行调整滑动的方向、持续时间和滑动的距离。
另外,如果你想在页面加载完成后执行多个操作,可以在`$(document).ready()`方法中添加多个函数,如下所示:
```
$(document).ready(function(){
// 默认展开第一块
$("#block1").slideDown(1000);
// 点击第二块时,展开第二块并收回第一块
$("#block2").click(function(){
$("#block1").slideUp(500);
$("#block2").slideDown(1000);
});
// 在这里添加其他操作
});
```
在这个例子中,当页面加载完成后,`$("#block1")`元素将向下滑动展开,同时绑定了`click()`方法用于点击展开第二块。你可以在`$(document).ready()`方法中添加其他需要执行的操作。