Question

我有两个按钮，当点击按钮1时它会显示一个元素，按钮2也是如此。问题是，如果单击按钮1并且您尝试单击按钮2，我希望它显示您需要关闭按钮1的错误消息，如果按钮2打开并且您单击按钮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>

我如何以及在哪里可以调用功能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>

如果另一个按钮打开，如何使按钮不可点击？

3 个答案: