如果另一個按鈕處於打開狀態，如何使按鈕不可單擊？

Question

我有兩個按鈕，當單擊按鈕1時，它將顯示一個元素，按鈕2也是如此。問題是，如果單擊了按鈕1並嘗試單擊按鈕2，我希望它顯示一條錯誤消息，需要關閉按鈕1，如果按鈕2處於打開狀態，然后單擊按鈕1，同樣的事情也會發生。

按鍵1

    <div class="button" id="button1" onclick="function1()">
<p id="button1_text">Animation</p>
</div>

<script>
function function1(){
var e = document.getElementById("front_page_blur");
if(e.style.animationName !== "slide") {                             
e.setAttribute("style", "position:relative;");           
e.style.animationName = "slide"; 
e.style.animationDuration = "1s";
$("#button1_animation").fadeIn(1500);

}
else {                                                       
e.style.animationName = "back";
e.style.animationDuration = "1s";
$("#button1_animation").fadeOut(1000);
}}
</script>

按鈕2

<div class="button" id="button2" onclick="function2()">
<p id="button2_text">Eclipse</p>
</div>
<script>
function function2(){
var s = document.getElementById("front_page_blur");
if(s.style.animationName !== "slideDown") {
s.setAttribute("style", "position:relative;");
s.style.animationName = "slideDown";
s.style.animationDuration = "1s";
$("#button2_animation").fadeIn(1500);
}
else {
s.style.animationName = "slideDownBack";
s.style.animationDuration = "1s";
$("#button2_animation").fadeOut(1000);
}}
</script>

如何以及在哪里調用函數2中的function1，反之亦然？

Answer 1

將此綁定到點擊處理程序

if ($('#button1_animation').is(':visible')) {
   alert('Close button 1');
}

Answer 2

您可以輕松使用jQuery和功能切換功能，看一下： http : //api.jquery.com/toggle/

Answer 3

如果碰巧有2個或3個以上的按鈕，則可能會發現以下方法更加靈活。

 $('.my_btns').click(function() { $('#error').hide(); if(($('.active-btn').length && !$(this).hasClass('active-btn'))){ // a button has the class but it's not this one, so some other button is open $('#error').show(); } else if($(this).hasClass('active-btn')){ // this button has the class so it is open // close the stuff.... // remove the class $(this).css("padding", "0px"); // just simulating animation here $(this).removeClass('active-btn'); } else{ // no buttons have the class so none are opne // open the stuff.... // add the class $(this).css("padding", "20px");// just simulating animation here $(this).addClass('active-btn'); } }); 

 .button{ background-color:#3095DC; margin-bottom:10px; } #error{ display:none; color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="error">Close the other button first</div> <div class="button my_btns" id="button1"> <p id="button1_text">Animation</p> </div> <div class="button my_btns" id="button2"> <p id="button2_text">Eclipse</p> </div>