你好，我刚刚创建了一个隐藏和显示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>由于面板元素是翻转元素的兄弟元素，并且在每次翻转后立即跟随，因此只需使用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>给元素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>
$(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>