个人中心
gpt4 book ai didi

javascript - Accordion 问题自动打开第一个

转载 作者：行者123 更新时间：2023-11-29 19:43:49 25 4
gpt4 key购买 nike

我希望第一个选项卡应该自动展开意味着当我刷新我的页面时第一个选项卡应该像这样展开常规(顶部标题)(-)
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/

25 4 0
文章推荐： javascript - Ember 的 registerBoundHelper 和 handlebar block
文章推荐： mysql - COUNT UNION 太多
文章推荐： android - Intent.FLAG_ACTIVITY_BROUGHT_TO_FRONT 不工作 4.4.4
文章推荐： android - 在 android 上处理 SMS 权限以自动验证 OTP
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com