CSS 手风琴图片不显示在 WordPress 网站上
Posted
技术标签:
【中文标题】CSS 手风琴图片不显示在 WordPress 网站上【英文标题】：CSS accordion pictures don't show on WordPress site 【发布时间】：2014-07-19 16:32:19 【问题描述】：我确定我只是错过了一些简单的东西，但它正在逃避我。我正在尝试让 CSS 手风琴工作并将每个部分链接到一个页面。
这里是来源http://www.webarti.com/css3-horizontal-accordion-slider/content-slider/
这是我当前的测试站点：http://g6t.test-lca-website.com/
我的手风琴部分正在工作（只有一个奇怪的怪癖，当您移动到第二个小节时，第一个小节会消失，但这可以稍后处理）但图片根本不会显示。现在我只有一张分配给“付款处理”滑块的图片没有显示。
这是我的代码：
<!-- 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" 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/ 文件夹中，看看是否有什么不同。它没有。
我已经尝试使用正常工作的图像（即徽标），它不会在滑块中加载徽标。对于徽标，我使用了带有 http 的完整 URL（目前使用的）。
更新：使用的图像可以通过它的 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 */
【问题讨论】：
【参考方案1】：您可以尝试将display 属性更改为无，然后在javascript 中使用onClick 将属性更改为display:block，如下所示：
<div id="accordianDiv" onClick = "appear"></div>
然后
function appear()
div = document.getElementById("accordianDiv");
div.style.display = "none";
【讨论】：
感谢您的反馈。我试图让这个尽可能简单。那个和进入 JavaScript 仍然让我有点困惑。致力于更好地理解 JS。 @DragonDon 好的，我完全理解，JS 一开始很混乱！我认为这可能是解决这个问题的唯一方法...... 那么你能解释一下为什么你建议的代码会有所作为吗？我在 codecademy 上做了一个 jquery 课程，并完成了显示/隐藏东西/菜单，但我没有建立联系的是如何使与此设置相关联的图像出现？或者你是说完全废弃 CSS 代码？然后我回到“这段代码到底去哪儿了？”当我看到答案时，我总是会遇到问题。 @DragonDon 是的，这将是一个问题，而且 JS 可能会有点困难，我也参加了 Codecademy 的课程 :) 我会尝试更改一些位置属性以使图像出现不过。 我决定寻找另一种 CSS 解决方案，这个解决方案效果很好。我已经结合了原始元素中的一些元素，现在看起来不错:) 再次感谢。【参考方案2】：我找到了另一种解决方案，效果更好，没有任何图像麻烦。我还结合了一些样式元素，一切都很好。
这个网站对这个问题有很好的解决方案：http://designshack.net/articles/css/build-a-freaking-awesome-pure-css-accordion/
【讨论】：
以上是关于CSS 手风琴图片不显示在 WordPress 网站上的主要内容，如果未能解决你的问题，请参考以下文章
WordPress用JavaScript和CSS实现二级菜单展开手风琴效果