javascript 手风琴问题自动打开第一个
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21390107/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
accordion issue to open first one automatically
提问by sultan
i want that the first tab should expand automatically mean when i refresh my page the first tab should expand like
General (top header)(-)
lorem ipsum (-)
lorem ipsum doller amu site amu doller
我希望第一个选项卡应该自动展开意味着当我刷新页面时，第一个选项卡应该像 General (top header)(-)
lorem ipsum (-)
lorem ipsum doller amu site amu doller 一样展开
lorem ipsum (+)
lorem ipsum (+)
lorem ipsum (+)
lorem ipsum (+)
lorem ipsum (+)
lorem ipsum (+)
lorem ipsum (+)
lorem ipsum (+)
......please any one can help....
......请任何人都可以帮助......
script is
脚本是
$(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");
}
});
});
and html is
和 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>
采纳答案by Vincenzo Maggio
You can simply use JQuery Accordionand his activeoption,like in this:
您可以简单地使用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>
Note that even if I explicitely added activeoption set to 0, this is the default value.
请注意，即使我明确添加了active设置为 0 的选项，这也是默认值。
In your case you should write JS:
在您的情况下，您应该编写 JS：
$(document).ready(function() {
//Initialising Accordion
$("#accordion").accordion()
});
HTML
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 is used here because is JQuery default, but you can change it in the options.
此处使用 H3 是因为它是 JQuery 的默认值，但您可以在选项中更改它。
Also remember that the accordion is applied on the first level of div after the h3 tag, so the div with the pane class in your case.
还请记住，手风琴应用在 h3 标记之后的第一级 div 上，因此在您的情况下是带有窗格类的 div。
回答by apohl
$(".accordian").first().addClass("current");
回答by Pseudonym
I think what you are looking for can be found here:
我想你要找的东西可以在这里找到：
http://jqueryui.com/accordion/#collapsible
http://jqueryui.com/accordion/#collapsible
The jquery UI accordian widget seems to do what you want, and when it loads on the page the first one is set to be open automatically
jquery UI 手风琴小部件似乎可以做你想做的，当它加载到页面上时，第一个被设置为自动打开
Also the collapsible set from jquery mobile is easy to set a specific one to collapsed or expanded and still have accordian like features
此外，jquery mobile 的可折叠集很容易将特定的集设置为折叠或展开，并且仍然具有类似手风琴的功能
回答by Sulung Nugroho
For the first block to active, use this approach :
对于第一个激活的块，请使用以下方法：
<div class="active">
<a href="#">This is questions...</a>
<div style="display: block">
<p>This is answer....</p>
</div>
</div>
in your case, use increment no++ and use if $no == 1, put the above script. Else remove class active and display: block
在你的情况下，使用 increment no++ 并使用 if $no == 1，把上面的脚本。否则删除类 active 并显示：阻止
