切换关闭其他打开的div

问题描述：

我想弄清楚如何在扩展其他div时关闭其他div。切换关闭其他打开的div

在这里看看我的代码：

$(document).ready(function() { 
 
\t $(".faq-question").click(function() { 
 
\t 
 
\t \t $(this).toggleClass('open'); 
 
\t \t $(this).parent().next('.field-faq-answer').toggle(); 
 
\t }); 
 
\t 
 
}); \t

.field-faq-answer{ 
 
\t display:none; \t 
 
} 
 
.faq-antwoord{ 
 
\t border-bottom: 1px solid #ccc; \t 
 
\t margin-top:10px; 
 
\t padding-bottom:10px; 
 
} 
 
.faq-antwoord p{ 
 
\t margin-bottom:0px; 
 
\t padding-left: 10px; 
 
    border-left: 2px solid #3395d3; 
 
\t margin-left:10px; 
 
} 
 
.field-faq-question-first{ 
 
\t border-top: 1px solid #ccc; \t 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="faq-container"> 
 
    <div class="field-faq-question field-faq-question-first"> 
 
     <h3 class="faq-question"> 
 
     Titel 1 
 
     </h3> 
 
    </div> 
 
    <div class="field-faq-answer"> 
 
     <div class="faq-antwoord"> 
 
     <p> 
 
      TEST 1 
 
     </p> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="faq-container"> 
 
    <div class="field-faq-question field-faq-question-first"> 
 
     <h3 class="faq-question"> 
 
     Titel 2 
 
     </h3> 
 
    </div> 
 
    <div class="field-faq-answer"> 
 
     <div class="faq-antwoord"> 
 
     <p> 
 
      TEST 2 
 
     </p> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="faq-container"> 
 
    <div class="field-faq-question field-faq-question-first"> 
 
     <h3 class="faq-question"> 
 
     Titel 3 
 
     </h3> 
 
    </div> 
 
    <div class="field-faq-answer"> 
 
     <div class="faq-antwoord"> 
 
     <p> 
 
      TEST 3 
 
     </p> 
 
     </div> 
 
    </div> 
 
</div>

现在可以点击titel 1和titel 2和内容都将显示。但我想只是想显示1个回答并隐藏其他

答

要做到这一点，你需要调用除一个所有其他.field-faq-answer元素所单击hide()，像这样：

$(document).ready(function() { 
 
    $(".faq-question").click(function() { 
 
    $(this).toggleClass('open'); 
 
    var $target = $(this).parent().next('.field-faq-answer').toggle(); 
 
    $('.field-faq-answer').not($target).hide(); 
 
    }); 
 
});

.field-faq-answer { 
 
    display: none; 
 
} 
 

 
.faq-antwoord { 
 
    border-bottom: 1px solid #ccc; 
 
    margin-top: 10px; 
 
    padding-bottom: 10px; 
 
} 
 

 
.faq-antwoord p { 
 
    margin-bottom: 0px; 
 
    padding-left: 10px; 
 
    border-left: 2px solid #3395d3; 
 
    margin-left: 10px; 
 
} 
 

 
.field-faq-question-first { 
 
    border-top: 1px solid #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="faq-container"> 
 
    <div class="field-faq-question field-faq-question-first"> 
 
    <h3 class="faq-question"> 
 
     Titel 1 
 
    </h3> 
 
    </div> 
 
    <div class="field-faq-answer"> 
 
    <div class="faq-antwoord"> 
 
     <p> 
 
     TEST 1 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="faq-container"> 
 
    <div class="field-faq-question field-faq-question-first"> 
 
    <h3 class="faq-question"> 
 
     Titel 2 
 
    </h3> 
 
    </div> 
 
    <div class="field-faq-answer"> 
 
    <div class="faq-antwoord"> 
 
     <p> 
 
     TEST 2 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="faq-container"> 
 
    <div class="field-faq-question field-faq-question-first"> 
 
    <h3 class="faq-question"> 
 
     Titel 3 
 
    </h3> 
 
    </div> 
 
    <div class="field-faq-answer"> 
 
    <div class="faq-antwoord"> 
 
     <p> 
 
     TEST 3 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>

答

试试这个：

$(document).ready(function() { 
    $(".faq-question").click(function() { 

     $('.field-faq-answer').toggle(); 
     $(this).toggleClass('open'); 
    }); 

});

答

您可以针对所有其他元素，除了那些您正在使用，并关闭那些

$(document).ready(function() { 
    var questions = $(".faq-question").on('click', function() { 
     $(this).toggleClass('open'); 
     questions.not(this).removeClass('open'); 

     var answer = $(this).parent().next('.field-faq-answer').toggle(); 
     $('.field-faq-answer').not(answer).hide(); 
    }); 
});

答

$(document).ready(function() { 
 

 
\t $(".faq-question").click(function() { 
 
    $('.faq-container .field-faq-answer').hide(); 
 
\t \t $(this).toggleClass('open'); 
 
\t \t $(this).parent().next('.field-faq-answer').toggle(); 
 
\t }); 
 
    
 
\t 
 
});

.field-faq-answer{ 
 
\t display:none; \t 
 
} 
 
.faq-antwoord{ 
 
\t border-bottom: 1px solid #ccc; \t 
 
\t margin-top:10px; 
 
\t padding-bottom:10px; 
 
} 
 
.faq-antwoord p{ 
 
\t margin-bottom:0px; 
 
\t padding-left: 10px; 
 
    border-left: 2px solid #3395d3; 
 
\t margin-left:10px; 
 
} 
 
.field-faq-question-first{ 
 
\t border-top: 1px solid #ccc; \t 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="faq-container"> 
 
    <div class="field-faq-question field-faq-question-first"> 
 
     <h3 class="faq-question"> 
 
     Titel 1 
 
     </h3> 
 
    </div> 
 
    <div class="field-faq-answer"> 
 
     <div class="faq-antwoord"> 
 
     <p> 
 
      TEST 1 
 
     </p> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="faq-container"> 
 
    <div class="field-faq-question field-faq-question-first"> 
 
     <h3 class="faq-question"> 
 
     Titel 2 
 
     </h3> 
 
    </div> 
 
    <div class="field-faq-answer"> 
 
     <div class="faq-antwoord"> 
 
     <p> 
 
      TEST 2 
 
     </p> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="faq-container"> 
 
    <div class="field-faq-question field-faq-question-first"> 
 
     <h3 class="faq-question"> 
 
     Titel 3 
 
     </h3> 
 
    </div> 
 
    <div class="field-faq-answer"> 
 
     <div class="faq-antwoord"> 
 
     <p> 
 
      TEST 3 
 
     </p> 
 
     </div> 
 
    </div> 
 
</div>

它的工作尝试。

答

您可以使用nextAll（）方法作为faq-container的父级父级，然后使用find来选择field-FAQ-answer并切换它。

$(this).parent().parent().nextAll('.faq-container').find('.field-faq-answer').toggle();

切换关闭其他打开的div

相关推荐