手风琴在IE8中不起作用......我在这个网站上尝试了几种解决方案。没运气。在这一点上任何帮助都会很棒。
HTML with JQuery：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<!--
Load CSS
-->
<!--
Load jQuery Api and accordion.js
-->
<script src="jquery.min.js"></script>
<script src="accordion.js"></script><script language="javascript">
$(function(){
$('.accordion header').bind('click', function() {
var self = $(this),
wrapper = self.parent(),
activeClosedHeight = $('.opened header').outerHeight(),
minHeight = self.outerHeight(),
contentHeight = wrapper.find('.content').outerHeight();
/* Conditional to determine current state */
if ( !wrapper.hasClass('opened') ) {
// Close other opened accordions than this
$('.opened')
.css({
"height" : activeClosedHeight
})
.removeClass('opened');
// Now add a class to the clicked accordion and set height
// CSS transitions will animate the height
wrapper
.addClass('opened')
.height(contentHeight + minHeight);
} else if ( wrapper.hasClass('opened') ) {
// Remove opened class and set the original height
// Again CSS3 will handle the slideIn animation
wrapper
.removeClass('opened')
.height(minHeight);
}
});
});</script>
<link href="files/CSS/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Wrapper -->
<div style="float:left">
<div class="accordion" style="cursor: hand;">
<!-- Trigger -->
<header>
<h3>Business Skills</h3>
</header>
<!-- Content Section -->
<section class="content">
<a href="#" title="Business Communications" target="_blank">Business Communications</a>
<a href="#" title="Call Center" target="_blank">Customer Service</a>
<a href="#" title="General Business Skills" target="_blank">General Business Skills</a>
<a href="#" title="Human Resources" target="_blank">Human Resources</a>
<a href="#" title="International Business" target="_blank">International Business</a>
<a href="#" title="Management & Leadership" target="_blank">Management & Leadership</a>
<a href="#" title="Nonprofit" target="_blank">Nonprofit</a>
<a href="#" title="Operations" target="_blank">Operations</a>
<a href="#" title="Sales & Marketing" target="_blank">Sales & Marketing</a>
</section>
</div>
CSS：
@charset“utf-8”;
/ * CSS文件* /
：悬停{
/ 点击时禁用刺激性灰度框* /
-webkit-tap-highlight-color：rgba（0,0,0,0）;
}
body {
background: #ffffff;
}
.accordion {
overflow: hidden;
margin: 0px auto 0px auto;
width: 280px;
background: #ffffff;
height: 60px;
/* Force hardware acceleration */
-moz-transform: translate3d(0,0,0); /* Firefox 4 */
-webkit-transform: translate3d(0,0,0); /* Safari and Chrome */
-o-transform: translate3d(0,0,0); /* Opera */
-ms-transform: translate3d(0,0,0); /* IExplorer 10 */
transform: translate3d(0,0,0);
/* Set those CSS3 transistions */
-moz-transition:height 0.8s; /* Firefox 4 */
-webkit-transition:height 0.8s; /* Safari and Chrome */
-o-transition:height 0.8s; /* Opera */
-ms-transition: height 0.8s; /* IExplorer */
transition:height 0.8s;
}
.accordion header {
/* This is the closed state */
background: url("files/images/arrows.png") 253px -17px no-repeat;
height: 60px;
text-align: left;
width: 100%;
/* To align the two elements horizontally without floats */
display: table;
}
.accordion.opened header {
background: url("files/images/arrows.png") 253px 23px no-repeat;
}
header img,
header h3 {
/* Nested elements get table-cell for horizontal alignment */
display: table-cell;
vertical-align: middle;
}
header img {
text-align: left;
opacity: 0.5;
width: 60px;
margin: 0 auto;
}
header h3 {
font-family: arial;
font-size: 1em;
color: #666666;
text-align: left;
width: 170px;
padding: 0 30px 0 10px;
}
.accordion .content {
padding: 10px 20px 10px 20px;
}
.accordion .content p,
.accordion .content a {
font-family: arial;
font-size: 14px;
line-height: 22px;
text-align: justify;
text-justify: inter-word;
color: #666666;
}
.accordion .content p {
margin: 0 0 10px 0;
}
.accordion .content a {
margin: 10px 0 10px 0;
background: grey;
display: block;
height: 32px;
padding: 8px 0 0 0;
color: #FFFFFF;
text-decoration: underline;
text-align: center;
}