手風琴產品頁Volusion

Question

我想完成使用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

謝謝！

Answer 1

您的CSS代碼被禁用，這就是爲什麼它不起作用。此外，你錯過了JavaScript來處理onclick事件。