手风琴问题自动打开第一个答案

【问题标题】：accordion issue to open first one automatically手风琴问题自动打开第一个
【发布时间】：2014-01-27 19:41:59
【问题描述】：

我希望第一个选项卡应该自动展开意味着当我刷新我的页面时第一个选项卡应该展开常规（顶部标题）(-)
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 UI 吗？您意识到有.accordion() UI 功能以及.tabs() 对吗？此外，您传递给 tabs() 的那些选项不反映现代 jQ UI 选项集 - 您使用的是什么版本的 jQuery 和 UI？
jQuery UI 的.accordion() 会自动按照您描述的方式运行（在页面加载时打开第一个选项卡），那么您为什么不使用它呢？

标签： javascript jquery

【解决方案1】：

您可以简单地使用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 的默认设置，但您可以在选项中更改它。

还请记住，手风琴是在 h3 标记之后的第一级 div 上应用的，因此在您的情况下是具有窗格类的 div。

【讨论】：

+1 是迄今为止唯一正确的答案。 active 选项已经默认为0 - 第一个手风琴窗格默认打开。如果他希望它们关闭或设置为不同的索引，他可以指定选项（false 关闭或X 索引），否则调用只需$('#accordion').accordion();
如果我理解正确，请稍等，是时候写了

【解决方案2】：

$(".accordian").first().addClass("current");

【讨论】：

我应该把这个放在哪里？
在你初始化手风琴之后。

【解决方案3】：

我想你要找的可以在这里找到：

http://jqueryui.com/accordion/#collapsible

jquery UI 手风琴小部件似乎做你想做的事，当它加载到页面上时，第一个设置为自动打开

jquery mobile 的可折叠集也很容易将特定的集设置为折叠或展开，并且仍然具有类似手风琴的功能

http://demos.jquerymobile.com/1.4.0/collapsibleset/

【讨论】：

【解决方案4】：

对于第一个激活的块，使用这种方法：

<div class="active">

<a href="#">This is questions...</a>

<div style="display: block">
     <p>This is answer....</p>  
 </div>

</div>

在你的情况下，使用增量 no++ 并使用 if $no == 1，放置上面的脚本。否则删除类活动并显示：块

【讨论】：