Javascript 如果jquery slideToggle元素被切换，则隐藏所有其他元素

我对jquery/javascript非常缺乏经验，我正试图艰难地完成这一步。我还发现了其他一些帖子，它们建议如何完成类似于我正在尝试做的事情，但我对javascript语法的了解非常有限。如果有人能帮忙，我将不胜感激

我想做的很简单。如果有打开的

，则隐藏所有其他文件。以下是我迄今为止所取得的成就

索引

<section class="about" id="about">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">

        <div id="hidden1"><h3>+ Heading 3</h3></div>
        <div class="showtext1">
          <p>Example text one</p>
        </div>

        <div id="hidden2"><h3>+ Heading 2</h3></div>
        <div class="showtext2">
          <p>Example text two</p>
        </div>

        <div id="hidden3"><h3>+ Heading 3</h3></div>
          <div class="showtext3">
            <p>Example text three</p>
          </div>

        </div>
      </div>
    </div>
</section>

---

让我们将代码动态化，这样当列表从3项增加到4项或更多项时，就不必担心添加更多jQuery代码。另外，如果有加号（+）表示有更多的内容，那么加号应该变成负（-），表示现在可以折叠显示的内容以获得更好的用户体验

HTML

---

让我们将代码动态化，这样当列表从3项增加到4项或更多项时，就不必担心添加更多jQuery代码。另外，如果有加号（+）表示有更多的内容，那么加号应该变成负（-），表示现在可以折叠显示的内容以获得更好的用户体验

HTML

---

您不需要无用地使用如此多的

div

元素，因为引导需要为布局添加几个div

代码说明：

文档加载完成后，让我们滑动所有

p

元素

单击

h3

时，让我们找到它旁边的

p

元素并将其向下滑动。再次单击相同的

h3

时，使用滑动切换有助于隐藏

p

元素

单击功能中第二行的功能将在以下场景中清除。因此，首先，如果单击

h3

元素，则

p

元素的侧面朝下。但当你点击另一个

h3

之后。

not

函数以当前单击的

p

元素以外的所有

p

元素为目标，并向上滑动所有元素。因此请记住，第一次单击的

h3

的

p

元素仍在显示，因此，当您在第二次单击中单击另一个

h3

时，我们需要隐藏该元素

希望该解释有助于理解代码

修改的HTML（删除不必要的div）

检查此代码笔和解决方案。

---

您不需要无用地使用这么多的

div

元素，因为引导需要为布局添加几个div

代码说明：

文档加载完成后，让我们滑动所有

p

元素

单击

h3

时，让我们找到它旁边的

p

元素并将其向下滑动。再次单击相同的

h3

时，使用滑动切换有助于隐藏

p

元素

单击功能中第二行的功能将在以下场景中清除。因此，首先，如果单击

h3

元素，则

p

元素的侧面朝下。但当你点击另一个

h3

之后。

not

函数以当前单击的

p

元素以外的所有

p

元素为目标，并向上滑动所有元素。因此请记住，第一次单击的

h3

的

p

元素仍在显示，因此，当您在第二次单击中单击另一个

h3

时，我们需要隐藏该元素

希望该解释有助于理解代码

修改的HTML（删除不必要的div）

检查此代码笔和解决方案。

---

你是一个美丽的人！代码笔中的JS可以正常工作，但是使用您发布的内容却无法正常工作。如果你纠正它，那么我将把它标记为已回答。再次感谢你！好啊我正在检查以修复错误。更新了代码。谢谢。你是一个美丽的人！代码笔中的JS可以正常工作，但是使用您发布的内容却无法正常工作。如果你纠正它，那么我将把它标记为已回答。再次感谢你！好啊我正在检查以修复错误。更新了代码。谢谢

$(function() {
    $('.showtext1')
        .hide();
});
$(document).ready(function() {
    $('#hidden1').click(function() {
        $('.showtext1').slideToggle("slow");
    });
});
// .showtext2
$(function() {
    $('.showtext2')
        .hide();
});
$(document).ready(function() {
    $('#hidden2').click(function() {
        $('.showtext2').slideToggle("slow");
    });
});
// .showtext3
// $(function() {
//     $('.showtext3')
//         .hide();
// });
$(document).ready(function() {
    $('#hidden3').click(function() {
        $('.showtext3').slideToggle("slow");
    });
});

<div class="accordion">
  <dl>
    <dt><h3><span>+</span> Heading 3</h3></dt>
    <dd><p>Example text one</p></dd>
    <dt><h3><span>+</span> Heading 2</h3></dt>
    <dd><p>Example text two</p></dd>
  </dl>
</div>

$(function() {
    $('.accordion dd').filter(':nth-child(n+4)').hide();
    $('.accordion dl').on('click', 'dt', function() {
       $('.accordion dd').hide();
       $(this).siblings("dt").find("span").text("+");
       $(this).find("span").text("-");
       $(this).next().slideDown();
    });
});

<section class="about" id="about">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h3>+ Heading 1</h3>
        <p>Example text one</p>
        <h3>+ Heading 2</h3>
        <p>Example text two</p>
        <h3>+ Heading 3</h3>
        <p>Example text three</p>
       </div>
      </div>
   </div>
</section>

$(document).ready(function(){
  $("p").slideUp();
  $("h3").click(function(){
    $(this).next("p").slideToggle("slow");
    $("p").not($(this).next("p")).slideUp();
  });
});