jQuery隐藏和显示切换仅保持一个div处于活动状态

我是JQuery和Javascript的初学者，我想知道如何编辑以下代码，以便在单击标题时，隐藏其他标题下的内容？我还希望箭头能正常工作

基本上，我只想在点击标题时激活一个内容

以下是我的代码：

---

谢谢

如果您只有几个部分，请使用.slideUp（）和.slideDown（）保持简单-请参阅更新的JSFIDLE:

  $(".prod_options").hide();
    $(".stag_options").hide();
    $(".qa_options").hide();

    $("#show_prod_options").click(function(){
        $(".prod_options").slideDown("slow");
    $(".stag_options").slideUp();
    $(".qa_options").slideUp();

        $("#arrow_prod").toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
    });
    $("#show_stag_options").click(function(){
        $(".stag_options").slideDown("slow");
                    $(".prod_options").slideUp();
    $(".qa_options").slideUp();
        $("#arrow_stag").toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
    });
    $("#show_qa_options").click(function(){
        $(".qa_options").slideDown("slow");
                    $(".prod_options").slideUp();
    $(".stag_options").slideUp();
        $("#arrow_qa").toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
    });

HTML（对所需的每个选项重复）：

JS:

---

我已经实现了一个if条件，当我点击一个活动标题时，它只是简单地折叠所有内容。我已经在Jeff Watkins的代码中添加了条件，它工作得非常好。下面是条件代码，下面是完整代码：

}))

---

谢谢你的帮助

使用多个选项，您可以使用.addClass和.removeClass获得更好的结果，而不是切换。由于某些原因，根本不显示箭头，但是我将代码复制到了这里，它们出现了。但是，箭头不能正确切换。预期的结果是，当我单击标题1时，其他内容将隐藏（可以正常工作），但箭头将无法正确切换。所有非活动标题都应该显示下来，活动标题显示出来，这在这里不起作用。另外，当我点击一个已经激活的标题时，它应该折叠它的内容，但是在这里，它没有。我已经在类中添加了“细节”和“箭头”，但是它不起作用，因为内容根本不会显示。（请查看）。此外，箭头确实会切换，但是，我需要在单击活动标题时也进行切换（以便它可以折叠，并隐藏所有内容）。基本上，我需要以下内容：首先，隐藏所有内容，然后在单击任何标题时，显示其内容，再单击时，隐藏其内容。或者，单击备选标题时，将隐藏上一个内容，并显示当前内容。谢谢@但丁·斯克里斯托-看我微妙的编辑。。。我在_选项（应该是_选项）中犯了一个套管错误。只需更改三个字母，您就完成了。@Jeff Watkins-现在可以了！我忘了类是区分大小写的。谢谢你！有没有什么方法可以让我做一些条件反射，当我点击任何活动标题时，它就会崩溃？目前，我可以在单击其他标题时折叠活动标题+内容。我是否可以实现一些功能，使其在单击自身时崩溃（+同时使用箭头）？下面是更正后的代码：@Jeff Watkins-我忘了添加，因为某些原因，整洁的更新只在这里有效，而不在我的本地文档上。知道为什么会这样吗？谢谢

  $(".prod_options").hide();
    $(".stag_options").hide();
    $(".qa_options").hide();

    $("#show_prod_options").click(function(){
        $(".prod_options").slideDown("slow");
    $(".stag_options").slideUp();
    $(".qa_options").slideUp();

        $("#arrow_prod").toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
    });
    $("#show_stag_options").click(function(){
        $(".stag_options").slideDown("slow");
                    $(".prod_options").slideUp();
    $(".qa_options").slideUp();
        $("#arrow_stag").toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
    });
    $("#show_qa_options").click(function(){
        $(".qa_options").slideDown("slow");
                    $(".prod_options").slideUp();
    $(".stag_options").slideUp();
        $("#arrow_qa").toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
    });

<div class="env_menu_options dropMenu" id="stag_env_menu_options">
    <div class="env_list" id="show_stag_options">
        <span id="arrow_stag" class="glyphicon glyphicon-chevron-down arrow"></span> Heading 2
    </div>
    <div class="stag_options detail">Content 2 <br>Content 2</div>
</div>

.detail {
    display:none;   
}

$(".dropMenu").on("click", function () {
    var notThisOne = $(this);

    $(".dropMenu").each(function() {
        if ($(this).attr("id") !== notThisOne.attr("id")) {            
            $(this).find(".arrow").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
            $(this).find(".detail").slideUp("slow");
        } 
        else {
            $(this).find(".arrow").toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
            $(this).find(".detail").slideToggle("slow");                
        }        
    });    
});

$("#show_prod_options").click(function(){ 
if( $('#arrow_prod').hasClass('glyphicon-chevron-down') ){
   expand("#arrow_prod", ".prod_options");              
} else {
   collapse();
}