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动画往往需要被明确告知，如果它们处于动画制作过程中就会停止。

如果您对我们在这里遇到的问题有任何疑问，请与我们联系！

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

或者，如果你想变得疯狂并且真正减轻你的javascript并使其更具可扩展性，你可以做一些事情，其中javascript从HTML本身获取线索以动态触发其目标。以下示例使用HTML中的数据属性作为要触发的元素的选项。这样，每次有另一个区域时，您都不会添加其他javascript函数。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

一次只允许一个过渡效果

1 个答案: