Question

我有一堆'项目'div，我想在点击时扩展它们。如果已经有一个项目打开，我想在我滑出新项目之前隐藏它。我还希望停止点击已关闭的项目，然后再次打开它。

这是我的意思的一个例子（警告 - 在浏览器中编写代码）：

        $('.projects').click(function() {
          var clicked_project = $(this);

          if (clicked_project.is(':visible')) {
            clicked_project.height(10).slideUp();
            return;
          }

          var visible_projects = $('.projects:visible');
          if (visible_projects.size() > 0) {
            visible_projects.height(10).slideUp(function() {
              clicked_project.slideDown();
            });
          } else {
            clicked_project.slideDown();
          }
        });

真的，我的大问题是第二部分 - 如果没有任何visible_projects，我必须能够立即运行回调，这很糟糕我必须使用它。

我认为这将是一项相当普遍的任务，我确信我会缺少一种简化。任何建议表示赞赏！

Answer 1

slideToggle？

$('.projects').click(function() {
  var siblings = $(this).siblings('.projects:visible');
  siblings.slideUp(400);
  $(this).delay(siblings.length ? 400 : 0).slideToggle();
});

使用延迟而不是回调，因为每个匹配项都会调用一次回调。如果可以看到多个项目，这将导致多次切换。

Answer 2

喜欢这个吗？

$(".projects")
.click(function () {
var a = $(this);
if (a.is(":visible")) return a.height(10)
    .slideUp(), void 0;
var b = $(".projects:visible");
b.size() > 0 ? b.height(10)
    .slideUp(function () {
    a.slideDown()
}) : a.slideDown()
})

简化我的菜单动画代码

2 个答案: