我确定我只是错过了一些简单的东西，但这是在逃避我。我正在努力让CSS手风琴工作，并让每个部分链接到一个页面。
以下是来源http://www.webarti.com/css3-horizontal-accordion-slider/content-slider/
以下是我当前的测试网站：http://g6t.test-lca-website.com/
我有手风琴部分工作（只有一个奇怪的怪癖，当你移动到第二个小节时第一个小节消失，但可以稍后处理）但是图片根本不显示。现在我只有一张图片分配给＆＃34;付款处理＆＃34;未显示的滑块。
这是我的代码：
<!-- CSS3 Accordion -->
<div class="accordion">
<!--[if IE ]><ul class="accordion-ie"><![endif]-->
<!--[if !IE]>--><ul><!--<![endif]-->
<li>
<a href="##"><span>Payment Processing </span></a>
<div>
<img border="0" alt="" src="img/blank-card-bills.jpg">
</div>
</li>
<li>
<a href="##"><span>Prepaid VISA/Mastercard cards </span></a>
<div>
<
</div>
</li>
<li>
<a href="##"><span>Banking Software </span></a>
<div>
</div>
</li>
<li>
<a href="##"><span>FX Trading </span></a>
<div>
</div>
</li>
<li>
<a href="##"><span>Equities Trading</span></a>
<div>
</div>
</li>
<li>
<a href="##"><span>CFD Trading</span></a>
<div>
</div>
</li>
</ul>
</div>
<!--CSS3 Accordion -->
我在网站的根目录中有一个名为img的文件夹，其中设置了755个权限。我甚至尝试将此文件夹放在wp-content/文件夹中，看看是否有任何区别。它没有。
我尝试使用工作正常的图像（即徽标），但它不会在滑块中加载徽标。使用徽标，我使用完整的URL和http（因为它目前使用）。
更新：所使用的图片可以通过它的URL轻松获得（我不能在这里放置超过2个链接，直到我获得10个代表，但只需将基本站点URL添加到/ img /blank-card-bills.jpg）
欢迎并赞赏任何/所有建议！
忘记包含CSS：
/* CSS3 Horizontal Accordion Slider / Video Gallery Version: 1.0
Author: Webarti
Author URL: http://www.webarti.com/
*/
/*********** Global Styles ***********/
body {
background-color:#1a77b8;
color:#1E1C21;
font-family:Arial;
font-size:13px;
padding:0 0 15px 0;
margin:0;
}
.container {
-moz-border-radius:8px;
-webkit-border-radius:8px;
background-color:#111111;
border:1px solid #2c2c2c;
margin:90px auto 25px auto;
padding:30px;
width:830px;
}
.header {
color:#666;
font-family:verdana;
font-size:30px;
font-style:italic;
height:65px;
letter-spacing:-1px;
margin:0 0 0 -20px;
padding:25px 0 0 8px;
position:absolute;
text-shadow:-1px -1px 0 #000000;
top:7px;
width:900px;
word-spacing:5px;
}
/*********** Theme Styles ***********/
.accordion {font-family: Arial, Helvetica, sans-serif;}
.accordion>ul>li>a {
-moz-box-shadow:inset 1px 0px 0px 0px #485CBD;
-webkit-box-shadow:inset 1px 0px 0px 0px #485CBD;
box-shadow:inset 1px 0px 0px 0px #485CBD;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#320BB8', endColorstr='#320078');
background:-webkit-gradient( linear, right top, left top, color-stop(0.05, #320BB8), color-stop(1, #320078) );
background:-moz-linear-gradient( right center, #320BB8 5%, #320078 100% );
background-color:#320BB8;
border-style:solid;
border-color:#321D85;
color:#FFFFFF;
font-size:15px;
font-weight:bold;
text-decoration:none;
text-shadow:-1px -1px 0px #3227B0;
}
.accordion>ul>li>a:hover{
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#320078', endColorstr='#320BB8');
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #320078), color-stop(1, #320BB8) );
background:-moz-linear-gradient( top center, #320078 5%, #320BB8 100% );
background-color:#9B0629;
}
.accordion>ul>li>div {
background-color:#000000;
color:#FFFFFF;
}
/******** Theme Structure *********/
.accordion>ul>li>div {
height:304px;
padding:10px;
width:600px;
}
.accordion>ul>li>a {
border-width:0 1px 0 0;
width:40px;
}
ul.accordion-ie>li>a>span { /* IE only */
margin-left:10px;
/* This value is necessary for centering rotated texts in Internet Explorer. */
}
.accordion {
width:825px;
/* This value refers to the total width of visible components
width = accordion>ul>li>div ( width + paddingRight + paddingLeft )
+ accordion>ul>li>a ( number of accordions x ( width + borderRrightWidth ) )
width = ( 600px + 10px + 10px ) + ( 5 x ( 40px +1px ) )
width = 825px
*/
}
.accordion, .accordion>ul>li>a {
height:324px;
/* This value refers to the total height of visible area
height = accordion>ul>li>div ( height + paddingTop + paddingBottom )
width = ( 304px + 10px + 10px )
width = 324px
*/
}
.accordion>ul>li {
margin-right:-620px;
/* This value refers to the negative of total width of content <div>
margin-right = accordion>ul>li>div (width + padding-right + padding-left)
margin-right = 600px + 10px + 10px
margin-right = 620px
*/
width:661px;
/* width = .accordion>ul>li>div ( width + padding-right + padding-left )
+ .accordion>ul>li>a ( width + border-right )
width = ( 600px + 10px + 10px ) + ( 40px + 1px )
width = 661px
*/
/* Transition Effect */
transition: margin-right 0.3s ease 0.2s;
-moz-transition: margin-right 0.3s ease 0.2s;
-webkit-transition: margin-right 0.3s ease 0.2s;
-o-transition: margin-right 0.3s ease 0.2s;
}
/******* Do not change folllowing properties **********/
.accordion {overflow:hidden;}
.accordion>ul {list-style:none;padding:0;margin:0;width:9999em;}
.accordion>ul>li {float:left;overflow:hidden;}
.accordion>ul>li>a {float:left;position:relative;z-index:1;-moz-outline-style:none;outline:none;}
.accordion>ul>li>a>span{ /* Text Rotation for all browsers */
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-ms-writing-mode:lr-bt;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
bottom:20px;display:block;position:absolute;width:100%;white-space:nowrap;
}
ul.accordion-ie >li>a>span {cursor:pointer;width:auto;} /* IE only */
.accordion>ul>li>div {float:left;overflow:auto;}
.accordion>ul>li:hover {margin-right:0px;}
ul.accordion-ie>li:hover {margin-right:0px;} /* IE only */
答案 0 :(得分：2)
您可以尝试将display属性更改为无，然后在JavaScript中使用onClick将属性更改为display:block，如下所示：
<div id="accordianDiv" onClick = "appear"></div>
然后
function appear() {
div = document.getElementById("accordianDiv");
div.style.display = "none";
}
答案 1 :(得分：1)
我发现另一个解决方案效果更好，没有任何图像麻烦。我还结合了一些造型元素，一切都很好。
此网站针对此问题提供了很好的解决方案：http://designshack.net/articles/css/build-a-freaking-awesome-pure-css-accordion/