doushai7225 2017-01-17 09:47
浏览 75
已采纳

基于case语句动态打开手风琴

I am trying to select what accordion has the .active class set based on the results of a switch/case statement.

I currently have a switch/case statement set to hide tabs depending on the statement.

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

The statement

the session varible is set to one, two or three

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

with this statement I can show or hide accordion tabs depending on the variable present one,two or three.

I would now like to make the displayed accordion tab active,

for example

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
  • 写回答

1条回答 默认 最新

  • dpp66953 2017-01-17 10:07
    关注

    You are trying to bypass using accordion to make its selections and overriding it with styles. That is fighting against the way it should work (using accordion). Instead of generating styles dynamically, just tell the accordion which tab to open at startup.

    Here is an example that avoids any server-side generation of styles: 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"));
    });
    

    It just picks up a data- attribute with the current selection number in it and tells the accordion to open that one:

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

    Or even simpler, just set the active value from the data-:

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

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面
  • ¥50 NT4.0系统 STOP:0X0000007B
  • ¥15 想问一下stata17中这段代码哪里有问题呀