jQuery 效果 - 隐藏和显示？答案

【问题标题】：jQuery Effect - Hide and Show?jQuery 效果 - 隐藏和显示？
【发布时间】：2022-01-16 14:08:14
【问题描述】：

您好，我刚刚创建了一个隐藏和显示 jQuery 效果 - 但是当我单击一个翻转时，另一个自动打开，我只想在我单击的那个上打开一个，而不是同时打开。我希望你明白我的意思，我在这里错过了什么？？

$(document).ready(function() {
  $(".flip").click(function() {
    $(".panel").toggle();
  });
});

div.panel,
p.flip {
  line-height: 30px;
  margin: auto;
  font-size: 16px;
  padding: 5px;
  text-align: center;
  background: #555;
  border: solid 1px #666;
  color: #ffffff;
  border-radius: 3px;
  user-select: none
}

div.panel {
  display: none;
}

p.flip {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="flip">Click to show/hide panel</p>
<div class="panel" style="display: none;">
  <p>help</p>
  <p>need help</p>
</div>

<p class="flip">Click to show/hide panel</p>
<div class="panel" style="display: none;">
  <p>show</p>
  <p>hide</p>
</div>

【问题讨论】：

标签： jquery show-hide

【解决方案1】：

由于面板元素是翻转元素的同级元素，并且在每次翻转后立即跟随，只需使用next() 来获取单击翻转实例之后的那个

$(".flip").click(function() {
  // `this` is the flip element that was clicked
  // and the panel you want is the `next()` after `this` 
  $(this).next(".panel").toggle();
});

div.panel,
p.flip {
  line-height: 30px;
  margin: auto;
  font-size: 16px;
  padding: 5px;
  text-align: center;
  background: #555;
  border: solid 1px #666;
  color: #ffffff;
  border-radius: 3px;
  user-select: none
}

div.panel {
  display: none;
}

p.flip {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<p class="flip">Click to show/hide panel</p>
<div class="panel" style="display: none;">
  <p>help</p>
  <p>need help</p>
</div>

<p class="flip">Click to show/hide panel</p>
<div class="panel" style="display: none;">
  <p>show</p>
  <p>hide</p>
</div>

【讨论】：

是的，这行我错了 $(this).next(".panel").toggle();
为什么在我发布我的 2 小时后，你接受了从我那里复制的答案？大错特错

【解决方案2】：

给元素id。试试这个。

<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<meta charset="utf-8">
<script> 
function toggle(ID)
{
$('#' + ID).toggle();
}
</script>
<style type="text/css"> 
div.panel,p.flip
{
line-height: 30px;
margin:auto;
font-size:16px;
padding:5px;
text-align:center;
background:#555;
border:solid 1px #666;
color:#ffffff;
border-radius:3px;
user-select:none
}
div.panel
{
display:none;
}
p.flip
{
cursor:pointer;
}
</style>
</head>
<body>
<p class="flip" onclick="return toggle('panel1')">Click to show/hide panel</p>
<div id="panel1" class="panel" style="display: none;">
<p>help</p>
<p>need help</p>
</div>

<p class="flip" onclick="return toggle('panel2')">Click to show/hide panel</p>
<div id="panel2" class="panel" style="display: none;">
<p>show</p>
<p>hide</p>
</div>
</body>
</html>

【讨论】：

【解决方案3】：

$(document).ready(function(){
    $(".flip").click(function(){
        $(this).next(".panel").toggle();
    });
});

div.panel,p.flip
{
line-height: 30px;
margin:auto;
font-size:16px;
padding:5px;
text-align:center;
background:#555;
border:solid 1px #666;
color:#ffffff;
border-radius:3px;
user-select:none
}
div.panel
{
display:none;
}
p.flip
{
cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<p class="flip">Click to show/hide panel</p>
<div class="panel" style="display: none;">
<p>help</p>
<p>need help</p>
</div>

<p class="flip">Click to show/hide panel</p>
<div class="panel" style="display: none;">
<p>show</p>
<p>hide</p>
</div>

【讨论】：

是的 ravi singh，这对我有用，方法是添加 (this).next... 非常感谢
这是我在发布前 2 小时提供的答案的完整副本。不要复制其他答案