我有一个工作代码，但我面临的问题是，当您单击第一个按钮和第二个按钮时，两者都会显示内容。我不希望按钮同时处于活动状态。当一个按钮显示另一个按钮应该自动隐藏它的内容时，我希望它们独立于其他含义。后一个单击的按钮应优先切换前一个按钮以隐藏。$("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>
3 回答
慕少森
TA贡献2019条经验 获得超9个赞
$("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。
陪伴而非守候
TA贡献1757条经验 获得超8个赞
试试这个：-
$("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>
莫回无
TA贡献1865条经验 获得超7个赞
您可以通过使用只需修改代码的隐藏和显示功能来做到这一点。
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>
<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>
添加回答
举报
0/150
提交
取消