代码之家 › 专栏 › 技术社区 › zaius

简化我的菜单动画代码

jquery javascript

zaius · 技术社区 · 15 年前

我有一堆“项目”的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();
          }
        });

实际上,我的大问题在于第二部分——我不得不使用if/else——如果没有任何可见的项目,我应该能够立即运行回调。

我认为这是一个很常见的任务,我确信我遗漏了一个简化。任何建议,谢谢!

2 回复 | 直到 12 年前

wombleton 15 年前

slideToggle ?

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

使用延迟而不是回调,因为回调对每个匹配项调用一次。如果多个项目可见,这将导致多个切换。

TrL 12 年前

这样地?

$(".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()
})

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

5 月前

user28928120 · 如何在jquery中选择所有类?

5 月前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

5 月前