只允許一次

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>