Question

我正在尝试根据switch / case语句的结果选择手风琴具有.active类的设置。

我目前设置了一个switch / case语句来隐藏选项卡，具体取决于语句。

<script>
        $(function () {
            $("#accordion-test").accordion({
                collapsible: true,
                active: '#accordion-test .active'

            });
        });
    </script>

<div id="accordion-test">
    <h3 class="content1 one">Content Title</h3>

    <div align="left">
        <p>Content for 1 Goes Here</p>
    </div>
    <h3 class="two">Content Title</h3>

    <div align="left">
        <p>Content for 2 Goes Here</p>
    </div>
    <h3 class="active three">Content Title</h3>

    <div align="left">
        <p>Content for 3 Goes Here</p>
    </div>
</div>

声明

会话变量设置为一，二或三

      <?php
            switch ($_SESSION['session']) {

                    case "one":
                        ?>
                        <style type="text/css">
                            .two,.three {
                                display: none !important;
                            }
                        </style>
                        <?php
    break;
                    case "one":
                        ?>
                        <style type="text/css">
                            .two,.three {
                                display: none !important;
                            }
                        </style>
                        <?php
break;
                    case "two":
                        ?>
                        <style type="text/css">
                            .one,.three {
                                display: none !important;
                            }
                        </style>
                        <?php
    case "three":
                        ?>
                        <style type="text/css">
                            .one,.two{
                                display: none !important;
                            }
                        </style>
}
                        <?php

使用此语句，我可以显示或隐藏折叠选项卡，具体取决于存在的变量one，two或three。

我现在想让显示的手风琴标签处于活动状态，

例如

case "one":
                        ?>
                        <style type="text/css">
                            .two,.three {
                                display: none !important;
                            }

HAVE ACTIVE STATE APPLIED TO ACCORDION TAB ONE
                        </style>
                        <?php


   <?php
    case "three":
                        ?>
                        <style type="text/css">
                            .one,.two{
                                display: none !important;
                            }
HAVE ACTIVE STATE APPLIED TO ACCORDION TAB THREE
                        </style>
                        <?php

Answer 1

您正试图绕过使用accordion进行选择并使用样式覆盖它。这是与它应该工作的方式作斗争（使用手风琴）。不要动态生成样式，只需告诉手风琴哪个标签在启动时打开。

这是一个避免任何服务器端生成样式的示例：http://jsfiddle.net/TrueBlueAussie/d6mSA/1187/

$(function() {
  var $accordion = $("#accordion");
  $accordion.accordion({
    autoHeight: true,
    collapsible: true
  });
  // Open the selected tab from the element
  $accordion.accordion('activate', $accordion.data("selection"));
});

它只是选取一个data-属性，其中包含当前的选择号，并告诉手风琴打开那个：

 <div id="accordion" data-selection="2">

甚至更简单，只需设置data-：

中的有效值即可

$(function() {
  var $accordion = $("#accordion");
  $accordion.accordion({
    autoHeight: true,
    collapsible: true,
    active:  $accordion.data("selection")
  });
});

JSFiddle：http://jsfiddle.net/TrueBlueAussie/d6mSA/1188/

根据案件陈述动态打开手风琴

1 个答案: