提问人：Samuel Masih 提问时间：12/3/2013 更新时间：12/29/2013 访问量：452
一个 div 可见，另一个隐藏
One div visible and other hidden
问：
我不是使用 jQuery 编程的专家，但我对这门语言有一点了解，问题是我希望一个 div 是可见的，另一个是隐藏的，只要你点击另一个 div，它应该向下滑动，第一个应该被隐藏。
错误是，如果你按一个div atm，就会搞砸。
$(document).ready(function () {
$('#link').click(function () {
if ($('.todo-post').is(":hidden")) {
$('#date-visible').slideUp("slow");
$('#date-hidden').slideDown("slow");
$('#tick-hidden').slideDown("slow");
$('.todo-post').slideDown("slow");
} else {
$('.todo-post').slideUp("slow");
$('#date-hidden').slideUp("slow");
$('#tick-hidden').slideUp("slow");
$('#date-visible').slideDown("slow");
}
});
});
这就是我目前使用的代码，它适用于一个 div，如果我添加另一个 div，到处都是文本，它会变得凌乱。我相信代码可以重新制作，以便它正常工作，但遗憾的是我不知道怎么做，我已经在网上搜索了一段时间。
答：
1赞
Hive7
12/3/2013
#1
基本上发生的事情是我们的元素具有绝对位置，因此如果您添加此 css，它将起作用：
div.todo-avatar-date-hidden {
position: static;
}
div.todo-tick {
position: static;
}
div.todo-post {
position: static;
}
此外，您需要将它相对靠近 css 的底部，否则它将被前面的代码覆盖，因此我建议转到我展示的 css 中的每个元素并删除使元素绝对的行
编辑
$('#link').click(function () {
if($('#date-visible').is(':hidden')) {
if(!($('#date-visible-2').is(':hidden'))) {
$('#date-visible-2, #date-hidden-2, #tick-hidden-2, .todo-post-2').slideToggle("slow");
}
}
$('#date-visible, #date-hidden, #tick-hidden, .todo-post').slideToggle("slow");
});
$('#link-2').on('click', function () {
if($('#date-visible-2').is(':hidden')) {
if(!($('#date-visible').is(':hidden'))) {
$('#date-visible, #date-hidden, #tick-hidden, .todo-post').slideToggle("slow");
}
}
$('#date-visible-2, #date-hidden-2, #tick-hidden-2, .todo-post-2').slideToggle("slow");
});
0赞
Akshat
12/3/2013
#2
ID 应该是唯一的，两个元素不能在同一页面中具有相同的 ID。您在 HTML 页面中使用了相同的 ID，例如“date-visible”。更改它们，然后相应地编码。
2赞
fauverism
12/3/2013
#3
您可以使用更少的代码来执行此操作
$(document).ready(function () {
$('#link').on('click', function () {
$('#date-visible, #date-hidden, #tick-hidden, .todo-post').slideToggle("slow");
});
});
评论