Javascript 我希望我的show/hide Jquery脚本始终显示一个隐藏内容，并且一次不显示超过1个隐藏文本

我希望这个显示/隐藏脚本在启动时显示第一个隐藏文本，并且始终只显示一个隐藏内容。因此，如果我显示文本3的隐藏内容，并且在我查看文本1的隐藏内容之前，我知道如果我按文本3，我希望文本1向上滑动，所有这些都是相同的。滑动切换我现在有了

$（文档）.ready（函数（）{
$（“.neverseen img”）。单击（函数（）{
$（this.parent（）.toggleClass（“活动”）；
$（“.neverseen p”）。滑动切换（“慢速”）；
返回false；
});
});
$（文档）.ready（函数（）{
$（“.neverseen1 img”）。单击（函数（）{
$（this.parent（）.toggleClass（“活动”）；
$（“.neverseen1p”）。滑动切换（“慢”）；
返回false；
});
});
$（文档）.ready（函数（）{
$（“.neverseen2 img”）。单击（函数（）{
$（this.parent（）.toggleClass（“活动”）；
$（“.neverseen2p”）。滑动切换（“慢”）；
返回false；
});
});
$（文档）.ready（函数（）{
$（“.neverseen3 img”）。单击（函数（）{
$（this.parent（）.toggleClass（“活动”）；
$（“.neverseen3 p”）。滑动切换（“慢速”）；
返回false；
});
});
#左面板h1{字体大小：18px；字体系列：“蒙特塞拉特黑体”；颜色：#b0a887；边框顶部：1px实心#b0a887；字体样式：普通；}
#左面板p{显示：无；颜色：#333；字体大小：14px；}
#左面板a{左边距：230px；}
#左面板img{}
.secondImage{
显示：无；
}
.active.firstImg{
显示：无；
}
.active.secondImage{
显示：内联块；
}

第一个标题
第一个文本

第二名
第二文本

第三名
第三文本

最后标题
最后文本

您可以为此制作一个简单的手风琴

$(document).ready(function($) {
    $('#accordion').find('.accordion-toggle').click(function(){

      //Expand or collapse this panel
      $(this).next().slideToggle('fast');

      //Hide the other panels
      $(".accordion-content").not($(this).next()).slideUp('fast');

    });
  });

您可以为此制作一个简单的手风琴

$(document).ready(function($) {
    $('#accordion').find('.accordion-toggle').click(function(){

      //Expand or collapse this panel
      $(this).next().slideToggle('fast');

      //Hide the other panels
      $(".accordion-content").not($(this).next()).slideUp('fast');

    });
  });

正如另一个答案所建议的，你可以使用手风琴，但如果你不想改变你的方法，你可以按照

将sec类添加到neverseen{1/2/3}div类

<div id="leftpanel">
  <div class="sec neverseen">
    <h1>First title</h1>
    <a href="#" id="show" class='active'>
        <img class="secondImage" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40">
        <img class="firstImg" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40">
    </a>
    <p class='active'>First text</p>
</div>
<div class="sec neverseen1">
    <h1>Second title</h1>
    <a href="#" id="show1">
        <img class="secondImage" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40">
        <img class="firstImg" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40">
    </a>
    <p>Second text</p>
</div>
<div class="sec neverseen2">
    <h1>Third title</h1>
    <a href="#" id="show2">
        <img class="secondImage" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40">
        <img class="firstImg" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40">
    </a>
    <p>Third text</p>
</div>
<div class="sec neverseen3">
    <h1>Last title</h1>
    <a href="#" id="show3">
        <img class="secondImage" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40">
        <img class="firstImg" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40">
    </a>
    <p>Last text</p>
</div>

在末尾添加此CSS

#leftpanel p.active{
  display: block;  
}


我在这里做的是将事件附加到secdiv下的所有图像

当有人点击这个按钮时，我会在父div上设置活动类，并每隔一个div重置一次。
正如另一个答案中所建议的，你可以使用手风琴，但如果你不想改变你的方法，你可以按照

将sec类添加到neverseen{1/2/3}div类

<div id="leftpanel">
  <div class="sec neverseen">
    <h1>First title</h1>
    <a href="#" id="show" class='active'>
        <img class="secondImage" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40">
        <img class="firstImg" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40">
    </a>
    <p class='active'>First text</p>
</div>
<div class="sec neverseen1">
    <h1>Second title</h1>
    <a href="#" id="show1">
        <img class="secondImage" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40">
        <img class="firstImg" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40">
    </a>
    <p>Second text</p>
</div>
<div class="sec neverseen2">
    <h1>Third title</h1>
    <a href="#" id="show2">
        <img class="secondImage" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40">
        <img class="firstImg" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40">
    </a>
    <p>Third text</p>
</div>
<div class="sec neverseen3">
    <h1>Last title</h1>
    <a href="#" id="show3">
        <img class="secondImage" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40">
        <img class="firstImg" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40">
    </a>
    <p>Last text</p>
</div>

在末尾添加此CSS

#leftpanel p.active{
  display: block;  
}


我在这里做的是将事件附加到secdiv下的所有图像

当有人点击该按钮时，我正在父div上设置活动类，并每隔一个div重置一次。
这是一个非常简单且很好的修复方法，只是一个问题，是否有可能获得第一个“sec neverseen”在启动时始终显示，以便当用户进入第一个隐藏内容中包含此脚本的页面时，可以看到该内容。已将“我的答案”更新为默认状态。基本上为段落定义了另一个活动类，并在默认情况下将活动添加到两个可见元素中。Beautiful可以完美地工作：）如果我想变得挑剔，让它看起来真的很漂亮，我想添加，这样它可以强制至少1个隐藏内容始终可见。。例如，如果我只看到其中一个内容，而我关闭了它，则什么也不会发生。这是一个非常简单且很好的修复方法，只是一个问题，是否有可能获得第一个“sec neverseen”在启动时始终显示，以便当用户进入第一个隐藏内容中包含此脚本的页面时，可以看到该内容。已将“我的答案”更新为默认状态。基本上为段落定义了另一个活动类，并在默认情况下将活动添加到两个可见元素中。Beautiful可以完美地工作：）如果我想变得挑剔，让它看起来真的很漂亮，我想添加，这样它可以强制至少1个隐藏内容始终可见。。例如，如果我只看到其中一个内容，而我关闭了它，则什么也不会发生。