如果另一个按钮处于打开状态，如何使按钮不可单击？

Question

I have two buttons, when button 1 is clicked it will display an element, the same thing goes for button 2. The problem is, if button 1 is clicked and you try to click button 2 I want it to display an error message that you need to close button 1, same thing goes for if button 2 is open and you click button 1.

Button1

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

Button2

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

How and where can I call function1 in function 2 to make it possible and vice versa?

Answer 1

bind this to click handler

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

Answer 2

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

Answer 3

If you happen to have more than 2 or 3 buttons, you may find the below approach more flexible.

 $('.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>