我希望第一个选项卡应该自动展开意味着当我刷新我的页面时第一个选项卡应该像这样展开
常规(顶部标题)(-)
lorem ipsum (-)
lorem ipsum doller amu 网站 amu doller
lorem ipsum (+)
lorem ipsum (+)
lorem ipsum (+)
lorem ipsum (+)
......请任何人帮助......
脚本是
$(document).ready(function() {
//Initialising Accordion
$(".accordion").tabs(".pane", {
tabs: '> h2',
effect: 'slide',
initialIndex: null
});
//The click to hide function
$(".accordion > h2").click(function() {
if ($(this).hasClass("current") && $(this).next().queue().length === 0) {
$(this).next().slideUp();
$(this).removeClass("current");
} else if (!$(this).hasClass("current") && $(this).next().queue().length === 0) {
$(this).next().slideDown();
$(this).addClass("current");
}
});
});
而 html 是
<div class="accordion">
<h2 style="background-color: #007194; text-align: center; padding: 0;font-family: 'Raleway',sans-serif;text-transform: uppercase;font-weight: normal;"><span style="font-size: 40px;"></span><?php echo "$value";?> <span> FAQS </span></h2>
<div class="pane">
<div class="accordion">
<?php
while($row=mysqli_fetch_array($ret))
{
echo "<h2> ".$row['question']."</h2>";
echo "<div class='pane'><div class='accordion'><p>".$row['answer']."</p></div></div>";
}
?>
</div>
</div>
</div>
最佳答案
您可以简单地使用 JQuery Accordion和他的 active 选项，就像这样:
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion({active: 0);
});
</script>
</head>
<body>
<div id="accordion">
<h3>First header</h3>
<div>First content panel</div>
<h3>Second header</h3>
<div>Second content panel</div>
</div>
</body>
</html>
请注意，即使我明确地将 active 选项设置为 0，这也是默认值。
在你的情况下你应该写 JS:
$(document).ready(function() {
//Initialising Accordion
$("#accordion").accordion()
});
HTML
<div class="accordion">
<h2 style="background-color: #007194; text-align: center; padding: 0;font-family: 'Raleway',sans-serif;text-transform: uppercase;font-weight: normal;"><span style="font-size: 40px;"></span><?php echo "$value";?> <span> FAQS </span></h2>
<div class="pane">
<div id="accordion">
<?php
while($row=mysqli_fetch_array($ret))
{
echo "<h3> ".$row['question']."</h3>";
echo "<div class='pane'><div class='accordion'><p>".$row['answer']."</p></div></div>";
}
?>
</div>
</div>
</div>
这里使用 H3 是因为 JQuery 默认设置，但您可以在选项中更改它。
另请记住， Accordion 应用于 h3 标记后的第一级 div，因此在您的情况下，带有 pane 类的 div。
关于javascript - Accordion 问题自动打开第一个，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21390107/