单击任一按钮时，如何防止两个 div 同时切换内容
[英]How to prevent both divs from toggling content at the same time when either button is clicked
问题描述
我有一个工作代码，但我面临的问题是，当您单击第一个按钮和第二个按钮时，两者都会显示内容。 我不希望按钮同时处于活动状态。 当一个按钮显示另一个按钮时，我希望它们独立于其他含义，应该自动隐藏其内容。 单击后一个按钮应优先切换前一个按钮以隐藏。
$("button").click(function() { $("p." + this.className).toggle("slow"); });
p { background: #dad; font-weight: bold; font-size: 16px; }
<script src="https://code.jquery.com/jquery-3.4.1.js"> </script> <button class="toggle1">Toggle 1</button> <button class="toggle2">Toggle 2</button> <p class="toggle1">Hiya</p> <p class="toggle2">Such interesting text, eh?</p>
4 个解决方案
解决方案1
0 2020-03-16 09:58:34
您可以通过使用隐藏和显示功能来完成此操作，您只需要修改代码即可。
var isButtonClicked=[] $(document).ready(function(){ $("p").hide(); $("button").click(function(){ var currentClass=$(this).attr("class"); if($.inArray(currentClass,isButtonClicked)==-1) { $("p").hide("slow"); $("p."+currentClass).show("slow"); isButtonClicked.push(currentClass); } else{ alert("second time you clicked") $(this).hide() } }) })
<html lang="en"> <head> <meta charset="utf-8"> <title>toggle demo</title> <style> p { background: #dad; font-weight: bold; font-size: 16px; } </style> </head> <body> <button class="toggle1">Toggle 1</button> <button class="toggle2">Toggle 2</button> <p class="toggle1">Hiya</p> <p class="toggle2">Such interesting text, eh?</p> </body> </html> <script src="https://code.jquery.com/jquery-3.4.1.js"> </script>
解决方案2
0 2020-03-16 10:01:37
在显示它们之前隐藏你的p 。
$("button").click(function() { $("p").hide(); $("p."+this.className).toggle("slow"); });
p{ display:none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html lang="en"> <head> <meta charset="utf-8"> <title>toggle demo</title> <style> p { background: #dad; font-weight: bold; font-size: 16px; } </style> </head> <body> <button class="toggle1">Toggle 1</button> <button class="toggle2">Toggle 2</button> <p class="toggle1">Hiya</p> <p class="toggle2">Such interesting text, eh?</p> </body> </html>
解决方案3
0 2020-03-16 10:25:05
尝试这个：-
$("button").click(function() { $("p[class*=toggle]:not(p."+this.className+")").hide(); $("p."+this.className).toggle("slow"); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style type="text/css"> p[class*=toggle] {display:none} p { background: #dad; font-weight: bold; font-size: 16px; } </style> <button class="toggle1">Toggle 1</button> <button class="toggle2">Toggle 2</button> <button class="toggle3">Toggle 3</button> <p class="toggle1">Hiya</p> <p class="toggle2">Such interesting text, eh?</p> <p class="toggle3">Another one</p>
解决方案4
0 已采纳 2020-03-16 10:28:56
$("p[class*=toggle]:not(p." + this.className + ")").hide(); $("button").click(function() { $("p[class*=toggle]:not(p." + this.className + ")").hide(); $("p." + this.className).toggle("slow"); });
p { background: #dad; font-weight: bold; font-size: 16px; }
<script src="https://code.jquery.com/jquery-3.4.1.js"> </script> <button class="toggle1">Toggle 1</button> <button class="toggle2">Toggle 2</button> <p class="toggle1">Hiya</p> <p class="toggle2">Such interesting text, eh?</p>
注意：-首先您需要隐藏所有divs ，然后单击按钮，您需要使用this功能显示特定 div。
在 Bootstrap V5 中，单击标题中的元素时如何防止手风琴切换？
[英]In Bootstrap V5, How to prevent accordion from toggling when element in header is clicked?
使用javascript单击按钮时如何在ul中显示多个div的p标签的内容
[英]How to display content of p tag of multiple divs in ul when button is clicked using javascript
仅当选中其中一个或两个复选框时，才单击onclick；单击按钮时，将显示模式形式
[英]Button onclick only when either or both checkboxes are checked, and modal form when button clicked
单击时如何在可折叠的div上同时扩展宽度和高度？
[英]How to expand both width and height on collapsible divs when clicked on?
使用jQuery在单击按钮上方添加内容时防止页面移动
[英]Prevent page from moving when content is added above clicked button with jQuery
单击标题中的mat-checkbox时，防止mat-expansion面板切换
[英]Prevent mat-expansion panel from toggling when mat-checkbox in Header clicked
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.