javascript - 基于case语句动态打开 Accordion

Question

我正在尝试根据 switch/case 语句的结果选择具有 .active 类集的 Accordion 。

我目前有一个 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>

声明

session 变量设置为一、二或三

      <?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

使用此语句，我可以根据存在的变量一个、两个或三个显示或隐藏 Accordion 选项卡。

我现在想让显示的 Accordion 选项卡处于事件状态，

例如

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 进行选择并用样式覆盖它。这是与它应该工作的方式(使用 Accordion )作斗争。无需动态生成样式，只需告诉 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- 属性，并告诉 Accordion 打开该属性:

 <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/