javascript - 一次只允许一种过渡效果

Question

我有三个 div，我想在单击链接之前保持隐藏状态，但是如果单击任何链接，我希望其他两个再次隐藏。我修改了http://plnkr.co/edit/Wpcgjs3FS4ryrhQUAOcU?p=preview为我工作:

<script>
    $("li#menu-item-64").click(function () {
        if ($("#advertise-wrapper").hasClass("height-transition-hidden"))
            $("#advertise-wrapper").slideDownTransition();
        else
            $("#advertise-wrapper").slideUpTransition();
    });

$("li#menu-item-65").click(function () {
        if ($("#about-wrapper").hasClass("height-transition-hidden"))
            $("#about-wrapper").slideDownTransition();
        else
            $("#about-wrapper").slideUpTransition();
    });

$("li#menu-item-66").click(function () {
        if ($("#contact-wrapper").hasClass("height-transition-hidden"))
            $("#contact-wrapper").slideDownTransition();
        else
            $("#contact-wrapper").slideUpTransition();
    });
</script>

我是否可以一次只制作其中一个？

Answer 1

我继续制作了它的一个片段!

所以，这里发生的事情是因为我们知道我们一次只想显示一个展开的包装器，所以我只是在展开我想要的包装器之前立即折叠所有包装器。

此外，您正在使用 slideTransition() 方法来执行动画，该方法有效，但我在此处切换类，以便获得平滑的动画，这些动画也会在过渡中反转当另一个被激活时自动。如果 jQuery 动画正在制作动画，则往往需要明确告知其停止。

如果您对我们这里提供的内容有任何疑问，请告诉我!

$("#button-one").click(function() {
  $(".area").removeClass("is-expanded");
  $("#area-one").addClass("is-expanded");
});

$("#button-two").click(function() {
  $(".area").removeClass("is-expanded");
  $("#area-two").addClass("is-expanded");
});

$("#button-three").click(function() {
  $(".area").removeClass("is-expanded");
  $("#area-three").addClass("is-expanded");
});

.area {
  width: 80px;
  height: 0;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  transition: all .5s ease-in-out;
}

.area.is-expanded {
  height: 50px;
}

#area-one {
  background-color: #1abc9c;
}

#area-two {
  background-color: #3498db;
}

#area-three {
  background-color: #9b59b6;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button-one">Button 1</button>
<button id="button-two">Button 2</button>
<button id="button-three">Button 3</button>

<br><br>

<div id="area-one" class="area">Area One</div>
<div id="area-two" class="area">Area Two</div>
<div id="area-three" class="area">Area Three</div>

或者，如果您想要疯狂地真正减轻 JavaScript 的负担并使其更具可扩展性，您可以做一些事情，让 JavaScript 从 HTML 本身获取提示来动态触发其目标。以下示例使用 HTML 中的数据属性作为要触发的元素的选项。这样，您就不会在每次需要担心其他区域时添加另一个 JavaScript 函数。

$(".button").click(function() {
  var areaID = $(this).data("area-id");
  $(".area").removeClass("is-expanded");
  $("#area-" + areaID).addClass("is-expanded");
});

.area {
  width: 80px;
  height: 0;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  transition: all .5s ease-in-out;
}

.area.is-expanded {
  height: 50px;
}

#area-one {
  background-color: #1abc9c;
}

#area-two {
  background-color: #3498db;
}

#area-three {
  background-color: #9b59b6;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button-one" class="button" data-area-id="one">Button 1</button>
<button id="button-two" class="button" data-area-id="two">Button 2</button>
<button id="button-three" class="button" data-area-id="three">Button 3</button>

<br><br>

<div id="area-one" class="area">Area One</div>
<div id="area-two" class="area">Area Two</div>
<div id="area-three" class="area">Area Three</div>