Question

我想第一个标签应该自动展开意味着当我刷新我的页面时，第一个标签应该展开一般（顶部标题）（ - ）
lorem ipsum（ - ）
lorem ipsum doller amu site 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>

Answer 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。

Answer 2

要激活第一个块，请使用以下方法：

<div class="active">

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

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

</div>

在你的情况下，使用increment no ++并使用if $ no == 1，放上面的脚本。否则删除class active并显示：block

Answer 3

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

Answer 4

我认为你在寻找的东西可以在这里找到：

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

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

此外，来自jquery mobile的可折叠集合很容易设置特定的折叠或展开，并且仍具有类似手段的功能

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

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

4 个答案: