javascript - Volusion 产品页面上的 Accordion

Question

我正在尝试使用 Volusion eComm 系统完成重新设计 - 使用起来有点令人沮丧。我的最后一个补救措施是尝试在“options_table”上实现 Accordion 盒。 Volusion 只允许用户访问产品页面模板的 css 文件，但可以在某些 .asp 页面上插入一些 javascript，尽管并非我尝试过的所有方法都有效。所以这就是我所做的:

这是我正在寻找的一个例子，这个网站也是用 Volusion 构建的: http://www.willowst.com/Parker-Lila-Dress-p/p51870gepmoc.htm

我在 products 模板上插入了一个额外的类到 options_box 表中，如下所示:

<script type="text/javascript"> 
$(document).ready( function() {
   $('#options_table').addClass( 'table table-condensed' );
} );
</script>

那行得通，所以我继续尝试使用以下代码通过 CSS 创建 Accordion :

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

谢谢!

Answer 1

您的 CSS 代码已被禁用，这就是它无法正常工作的原因。此外，您错过了处理 onclick 事件的 javascript。