Question

我试图使用Volusion eComm系统完成重新设计 - 这有点令人沮丧。我的最后一个差距是尝试在＆＃34; options_table＆＃34;上实现手风琴盒。 Volusion只允许用户访问产品页面模板的css文件，但是可以在某些.asp页面上插入一些javascript，但不是我尝试过的所有内容都有效。所以这就是我所做的：

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

我在products_box表中将另一个类插入到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代码已停用，这就是它无法正常工作的原因。此外，您错过了处理onclick事件的JavaScript。

Volusion产品页面的手风琴

1 个答案: