doushai7225 2017-01-17 01: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 02: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/

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

报告相同问题?

悬赏问题

  • ¥50 数据库开发问题求解答
  • ¥15 安装anaconda时报错
  • ¥20 如何用Python处理单元格内连续出现的重复词语?
  • ¥15 小程序有个导出到插件方式,我是在分包下引入的插件,这个export的路径对吗,我看官方文档上写的是相对路径
  • ¥20 希望有人能帮我完成这个设计( *ˊᵕˋ)
  • ¥100 将Intptr传入SetHdevmode()将Intptr传入后转换为DEVMODE的值与外部代码不一致
  • ¥50 基于ERA5数据计算VPD
  • ¥15 寻找杂志《Tornatzky, L. G., & Fleischer, M. (1990). The Processes of Technological Innovation. 》
  • ¥15 前台多人编辑时怎么让每个人保存刷新都互不干扰
  • ¥20 如何用Python删除单元格内连续出现的重复词?
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部