根据 div 可见性 jquery 显示或隐藏按钮

Question

我的页面上有 2 个按钮，比如 button1 和 button2。在它下面还有一个div。
像下面这样的东西。

    $("#button1,#button2").click(function () {
            $("#div1").toggle("Slow");
    
            if ($("#div1").is(':visible')) {               
                $('#button1').show();
                $('#button2').hide();
            } else {            
                $('#button1').hide();
                $('#button2').show();
            }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divClick">
          <input type="image" id="button1" src="Images/down.png" alt="Submit1" width="25" height="25">
          <br>
          <input type="image" id="button2" src="Images/up.png" alt="Submit2" width="25" height="25">
    </div>
    <div id="div1">
          Welcome!!!
    </div>

这似乎不起作用。

Answer 1

在您的代码中，无论按下什么按钮，您都应将其拆分为 2 个函数或使用 $(this) 来引用已按下的按钮：

    $("#button1,#button2").click(function () {
        $("#div1").toggle("Slow");
    
        $('input').each(function(){
            //show all button
            $(this).show();
        })

        //hide pressed button
        $(this).hide();
        
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divClick">
          <input type="image" id="button1" src="Images/down.png" alt="Submit1" width="25" height="25">
          <br>
          <input type="image" id="button2" src="Images/up.png" alt="Submit2" width="25" height="25">
    </div>
    <div id="div1">
          Welcome!!!
    </div>

你可以在这里看到一个活生生的例子：

https://jsfiddle.net/xv6eorkk/

（你也应该在开头用css隐藏你想要的按钮，这样更逼真）

Answer 2

使用this和siblings。

$("#button1,#button2").click(function(e) {
  $("#div1").toggle("Slow");
  $(this).hide();
  $(this).siblings().show();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divClick">
  <input type="image" id="button1" src="Images/down.png" alt="Submit" width="25" height="25">
  <input type="image" id="button2" src="Images/up.png" alt="Submit" width="25" height="25">
</div>
<div id="div1">
  Welcome!!!
</div>

Answer 3

HTML

<div id="divClick">
   <input type="image" id="button1" class="toggleButton" src="Images/down.png" alt="Submit" width="25" height="25">
   <input type="image" id="button2" class="toggleButton" src="Images/up.png" alt="Submit" width="25" height="25">
</div>
<div id="div1">
          Welcome!!!
</div>

JS

$(".toggleButton").click(function () {
      $("#div1").toggle("Slow", toggleOnComplete);
    });

function toggleOnComplete(){
   if ($("#div1").is(':visible')) {               
      $('#button1').show();
      $('#button2').hide();
   } else {            
      $('#button1').hide();
      $('#button2').show();
   }
}

我在HTML中添加了一个class，因为按钮具有相同的功能。

出错的是你切换可见性并立即询问 div 是否可见。

虽然 #div1 正在逐渐消失，但它仍然可见，因为它正在执行动画，因此您必须在动画完成切换后调用 function。

.toggle() 知道什么时候完成，所以它也知道什么时候调用您定义的函数。

Answer 4

这非常有效。

$("#button1").click(function(){
    $(this).hide();
    $("#button2, #div1").toggle(true);
});
$("#button2").click(function(){
    $("#button2, #div1").toggle(false);
    $("#button1").toggle(true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="divClick">
      <input type="image" id="button1" src="Images/down.png" alt="Show" width="25" height="25" style="display:none">
      <input type="image" id="button2" src="Images/up.png" alt="Hide" width="25" height="25">
</div>
<div id="div1">
      Welcome!!!
</div>

Answer 5

如果您使用 CSS 设置初始状态，您只需在单击事件处理程序中对两个按钮和 #div1 元素调用 toggle()：

$('.button').click(function() {
  $('#div1, .button').toggle();
});

#button1, #div1 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divClick">
  <input type="image" id="button1" src="Images/down.png" alt="Down" width="25" height="25" class="button">
  <input type="image" id="button2" src="Images/up.png" alt="Up" width="25" height="25" class="button">
</div>
<div id="div1">
  Welcome!!!
</div>

请注意，我在 input 元素中添加了 button class。如果您无法控制 HTML.

，这可以很容易地替换为 input[type="image"]

Answer 6

$(document).ready(function(){
$('#button1,#button2').click(function(){
    $("#div1").toggle("Slow"); 
    $(this).toggle("Slow");
    if($(this).attr('id')=='button1'){$('#button2').show();}
    else{$('#button1').show();}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="divClick">
      <button type="button" id="button1">Btn 1</button>
      <button type="button" id="button2">Btn 2</button>
   
</div>

<br/><br/>

<div id="div1">
      Welcome!!!
</div>

根据 div 可见性 jquery 显示或隐藏按钮

Show or hide buttons based on div visibility jquery

html

javascript

jquery

toggle