Question

我不是使用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，那里到处都是文本，它会变得混乱。我相信代码可以重新制作，因此它可以正常工作，但遗憾的是我不知道我是如何在网上搜索一段时间的。

LINK TO MY WEBSITE

Answer 1

您可以使用更少的代码执行此操作

    $(document).ready(function () {
      $('#link').on('click', function () {
        $('#date-visible, #date-hidden, #tick-hidden, .todo-post').slideToggle("slow");
      });
    });

Answer 2

基本上发生的事情是我们的元素具有绝对位置，所以如果你添加这个css它会起作用：

div.todo-avatar-date-hidden {
    position: static;
}
div.todo-tick {
    position: static;
}
div.todo-post {
    position: static;
}

另外你需要将它放在你的css底部附近，否则它会被前面的代码覆盖，所以我建议去我已经显示的css中的每个元素并删除使元素绝对的行< / p>

修改

$('#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"); });

Answer 3

ID应该是唯一的，没有两个元素可以在同一页面中具有相同的ID。您在HTML页面中使用了与“日期可见”相同的ID。更改它们然后相应地编码。

一个div可见，另一个隐藏

3 个答案: