显示/隐藏 div，但在页面加载时显示一些 [关闭]

Question

我经常为常见问题解答等内容设置显示/隐藏元素，并使用以下代码：

HTML：

<div class="faq">
    <h2 class="faq_q toggle-section">Question</h2>
    <div class="faq_a content-section">Answer</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section">Question</h2>
    <div class="faq_a content-section">Answer</div>
</div>

JS：

// Show / Hide Sections
$(".toggle-section").next(".content-section").hide();
$(".toggle-section").click(function() {
   $(this).toggleClass('active').next().slideToggle("fast");
});

这很好用，但在这种情况下，我需要一些关于页面加载的选定问题，但我就是不知道我需要做什么才能做到这一点。

非常感谢任何帮助。

Answer 1

所以您正在寻找一些已经切换的问题吗？这意味着在 HTML 中它们应该已经有“活动”类，然后切换它们，在这种情况下，您有几个选项，这取决于您要如何处理它，或者您可以在 HTML 之前添加活动类页面加载您想要显示的内容，然后搜索活动类并进行切换。

// Show / Hide Sections
//This next line will always be executed, should be in the CSS as .content-section{ display: none;}
$(".toggle-section").next(".content-section").hide();


$(".toggle-section").click(function() {
    $(this).toggleClass('active').next().slideToggle("fast");
});

//Now you could either trigger the click of the elements which have an "active" class like this:

$('.toggle-section.open').each(function(){
    $(this).click();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="faq">
    <h2 class="faq_q toggle-section">Question</h2>
    <div class="faq_a content-section">Answer</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section open">Question</h2>
    <div class="faq_a content-section">Answer</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section">Question</h2>
    <div class="faq_a content-section">Answer</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section open">Question</h2>
    <div class="faq_a content-section">Answer</div>
</div>

Answer 2

您可以这样做：生成一个包含所有常见问题解答编号的数组，从该数组中获取一个随机数并显示带有该编号的常见问题解答。在此示例中，显示了 6 个常见问题解答中的 2 个。

$(".faq").hide();
var Show = 2, 
    Faq = $(".faq").length, 
    array = [], 
    rnd, value, i;

for (i = 0; i < Faq; i++) { 
  array[i] = i;
}

for (i = 0; i < Show; i++) { 
  rnd = Math.floor(Math.random() * array.length); 
  value = array.splice(rnd,1)[0]; 
  $(".faq:eq(" + value + ")").show();
}

// Show / Hide Sections
$(".toggle-section").next(".content-section").hide();
   $(".toggle-section").click(function() {
   $(this).toggleClass('active').next().slideToggle("fast");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="faq">
    <h2 class="faq_q toggle-section">Question 1</h2>
    <div class="faq_a content-section">Answer 1</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section">Question 2</h2>
    <div class="faq_a content-section">Answer 2</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section">Question 3</h2>
    <div class="faq_a content-section">Answer 3</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section">Question 4</h2>
    <div class="faq_a content-section">Answer 4</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section">Question 5</h2>
    <div class="faq_a content-section">Answer 5</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section">Question 6</h2>
    <div class="faq_a content-section">Answer 6</div>
</div>

对于这个答案，我合并了 gonchuki 给出的 answer。

更新：正如 cmets 对此答案所阐明的那样，请求是在页面加载时已经显示一些选定的答案。如果这些答案应该随机显示，可以像这样调整前面的示例：

$(".toggle-section").next(".content-section").hide();
   $(".toggle-section").click(function() {
   $(this).toggleClass('active').next().slideToggle("fast");
});
var Show = 2, 
    Faq = $(".faq").length, 
    array = [], 
    rnd, value, i;

for (i = 0; i < Faq; i++) { 
  array[i] = i;
}

for (i = 0; i < Show; i++) { 
  rnd = Math.floor(Math.random() * array.length); 
  value = array.splice(rnd,1)[0]; 
  $(".toggle-section:eq(" + value + ")").toggleClass('active').next().slideToggle("fast");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="faq">
    <h2 class="faq_q toggle-section">Question 1</h2>
    <div class="faq_a content-section">Answer 1</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section">Question 2</h2>
    <div class="faq_a content-section">Answer 2</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section">Question 3</h2>
    <div class="faq_a content-section">Answer 3</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section">Question 4</h2>
    <div class="faq_a content-section">Answer 4</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section">Question 5</h2>
    <div class="faq_a content-section">Answer 5</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section">Question 6</h2>
    <div class="faq_a content-section">Answer 6</div>
</div>