我正在尝试使用 Volusion eComm 系统完成重新设计——使用起来有点令人沮丧。我的最后一个停顿是试图在“options_table”上实现一个手风琴盒。Volusion 仅允许用户访问产品页面模板的 css 文件，但可以在某些 .asp 页面上插入一些 javascript，尽管并非我尝试的所有方法都有效。所以这就是我所做的：
这是我正在寻找的一个例子，这个网站也建在 Volusion： http: //www.willowst.com/Parker-Lila-Dress-p/p51870gepmoc.htm
我在产品模板中插入了一个附加类到 options_box 表中，如下所示：
<script type="text/javascript">
$(document).ready( function() {
$('#options_table').addClass( 'table table-condensed' );
} );
</script>
那行得通，所以我继续尝试使用以下代码通过 CSS 创建手风琴：
/*Define Accordion box*/
#options_table { width:100%; overflow:hidden; margin:10px auto; color:#474747; background:#414141; padding:10px; }
/*General Accordion****************************************************************************/
/*Set style of open slide*/
#options_table table > tbody > tr > td > font > i > b > br > table > tr:target { background:#FFF; padding:10px;}
#options_table table > tbody > tr > td > font > i > b > br > table > tr:hover { background:#FFF; }
#options_table table > tbody > tr > td > font > i > b > br > table > tr:target h2 {width:100%;}
#options_table table > tbody > tr > td > font > i > b > br > table > tr:target h2 a{ color:#333; padding:0;}
#options_table table > tbody > tr > td > font > i > b > br > table > tr:target p {display:block;}
#options_table table > tbody > tr > td > font > i > b > br > table > tr h2 a{padding:8px 10px;display:block; font-size:16px; font-weight:normal;color:#eee; text-decoration:none; }
/*set style of closed slide*/
#options_table table > tbody > tr > td > font > i > b > br > table > tr{ float:left; overflow:hidden; color:#333; cursor:pointer; background: #333; margin:3px; }
#options_table table > tbody > tr > td > font > i > b > br > table > tr:hover {background:#444;}
#options_table table > tbody > tr > td > font > i > b > br > table > tr p { display:none; }
#options_table table > tbody > tr > td > font > i > b > br > table > tr:after{position:relative;font-size:24px;color:#000;font-weight:bold;}
#options_table table > tbody > tr > td > font > i > b > br > table > tr:nth-child(1):after{content:'1';}
#options_table table > tbody > tr > td > font > i > b > br > table > tr:nth-child(2):after{content:'2';}
#options_table table > tbody > tr > td > font > i > b > br > table > tr:nth-child(3):after{content:'3';}
#options_table table > tbody > tr > td > font > i > b > br > table > tr:nth-child(4):after{content:'4';}
#options_table table > tbody > tr > td > font > i > b > br > table > tr:nth-child(5):after{content:'5';}
/*End General Accordion****************************************************************************/
/*Vertical Accordion *************************************************************************/
#options_table table > tbody > tr > td > font > i > b > br > table > tr{ width:100%; height:40px;
-webkit-transition:height 0.2s ease-out;
-moz-transition:height 0.2s ease-out;
-o-transition:height 0.2s ease-out;
-ms-transition:height 0.2s ease-out;
transition:height 0.2s ease-out;
}
/*Set height of the slide*/
#options_table table > tbody > tr > td > font > i > b > br > table > tr:target{ height:250px; width:97%; }
#options_table tbody > tr > td > font > i > b { position:relative; left:0; top:-15px; }
/*Set position of the number on the slide*/
#options_table table > tbody > tr > td > font > i > b > br > table > tr:after{ top:-60px;left:810px;}
#options_table table > tbody > tr > td > font > i > b > br > table > tr:target:after{ left:-9999px;}
/*Vertical Accordion *************************************************************************/
它改变了表格的一些元素，但我无法完全掌握它。来自更有经验的用户的任何帮助将不胜感激！
这是我的沙箱：http: //kdtnc.snwpe.servertrust.com/cybex-750T-legacy-treadmill-p/cyb-750t.htm
谢谢！