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

Question

我是 JQuery 和 Javascript 的初学者，我想知道我应该如何编辑以下代码，以便当我单击一个标题时，另一个标题下的内容标题，会被隐藏吗？我也希望箭头能正常工作。

基本上，我只想在单击标题时保持一个内容处于活动状态？

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

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

谢谢！

Answer 1

如果您只有几个部分，请使用 .slideUp() 和 .slideDown() 保持简单 - 请参阅更新的 jsfiddle：

  $(".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");
    });

https://jsfiddle.net/mL79571z/4/

Answer 2

http://jsfiddle.net/mL79571z/13/

HTML（为您需要的每个选项重复）：

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

CSS:

.detail {
    display:none;   
}

JS:

$(".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");                
        }        
    });    
});

Answer 3

我已经实现了一个 if 条件，这样当我点击一个活动标题时，它只会折叠所有内容。我已将条件添加到 Jeff Watkins 的 代码中，它运行良好。下面是条件语句，这里是完整代码：http://jsfiddle.net/mL79571z/12/

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

});

感谢大家的帮助！

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

jQuery hide and show toggle keeping active only one div

jquery

toggle

hide

show

toggleclass