jQuery 效果 - 隐藏和显示？

Question

你好，我刚刚创建了一个隐藏和显示 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>

Answer 1

给元素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>

Answer 2

由于面板元素是翻转元素的兄弟元素，并且在每次翻转后立即跟随，只需使用 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>

Answer 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>

jQuery 效果 - 隐藏和显示？

jQuery Effect - Hide and Show?

jquery

show-hide