0
Так что этот jquery-аккордеон не работает в IE 8, но отлично работает в Firefox, Chrome и Safari. Что дает?jquery accordion не работает в IE 8
Вот скрипка, http://jsfiddle.net/jEeqQ/
Вот скрипт ссылки и код
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(".blurb, .contributors").accordion({
activate: function(event, ui) {}
});
</script>
<script>$(document).ready(function($) {
$(".blurb, .contributors").on("accordionactivate", function(event, ui) {
event.preventDefault();
$('html,body').animate({scrollTop:$(".ui-accordion-content").offset().top}, 500);
});
});
</script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script>
$(function() {
$(".blurb").accordion({
collapsible: true,
heightStyle: "content",
active:false
});
});
</script>
HTML:
<div class="blurb">
<h3></h3>
<div>
<div class="text_center full left padding">
<h1 class="uppercase">#fridayfacts</h1>
<h6>Join us on twitter every friday</h6><br>
<h6 class="text_center"><a class="button" href="https://twitter.com/rcumsu" target="_blank">@rcumsu</a></h6>
</div>
<div class="text_left full right">
<h6>Fact:</h6>
<div class="text_left padding half left">
<p>The US needs 34% more students in STEM to keep up w/ economic demand. CTE helps meet that need.</p>
<p>Too many MS students drop out, often because they don't see real-world value of a degree. With CTE, they connect learning to work.</p>
<p>13K people with 4-yr degrees have re-entered MS community colleges to gain job skills. CTE prepares them for a profession.</p>
<p>20M+ in the US are un/underemployed, yet 3.4M jobs are unfilled due to skills gaps. CTE gives students the skills they need to find work.</p>
</div>
<div class="text_left padding half right">
<p>Employers value real-world, hands-on job experience. With CTE, MS students gain this experience early and qualify for more jobs.</p>
<p>STEM ed is crucial to US competitiveness in technology. CTE helps get kids in those fields faster. </p>
<p>By 2018, the US will need 22 million associate or higher degrees to fuel the economy. With CTE, MS students will be ready.</p><br><br><br>
</div>
</div>
</div>
</div>
CSS:
.blurb, .contributors {
/*
display: block;
float: left;
height: 0;*/
position:absolute;
bottom:0;
width: 100%;
}
.flex-viewport .blurb {
bottom:-15px;
}
.blurb_padding {
padding-bottom:50px;
}
.ui-accordion {
height:0;
}
.ui-accordion-header {
font-family: 'BrandonGrotesqueMedium';
font-size:16px;
text-transform:uppercase;
letter-spacing:1.5px;
line-height:12px;
padding:26px;
background:#FBAF39;
position: relative;
bottom: 64px;
cursor: pointer;
opacity: 1;
-webkit-transition: all .3s ease;
margin:0 auto;
text-align:center;
color: #FFFFFF;
z-index:9999;
}
.blurb .ui-accordion-header {
width:60px;
}
.contributors .ui-accordion-header {
width:150px;
}
.ui-state-default.ui-accordion-header.ui-accordion-header-active.ui-state-hover {
background:#FFFFFF;
color:#FBAF39;
}
.ui-state-default.ui-accordion-header.ui-state-hover{
background:#DDDDDD;
color:#777C76;
}
.ui-accordion-header-active {
background:#fbfbfb;
color:#FBAF39;
}
.blurb .ui-state-default.ui-accordion-header:after {
content:"extra";
}
.blurb .ui-state-default.ui-accordion-header.ui-accordion-header-active:after {
content:"close";
}
.contributors .ui-state-default.ui-accordion-header:after {
content:"contributors";
}
.contributors .ui-state-default.ui-accordion-header.ui-accordion-header-active:after {
content:"close";
}
.ui-accordion-content {
background:#FBAF39;
background-repeat: repeat;
color:#FFFFFF;
width:90%;
padding:3% 5% 55px;
position:absolute;
bottom:0;
}
.ui-accordion-content a.button {
background:#fbfbfb;
padding:13px;
line-height:12px;
color:#FBAF39;
}
.ui-accordion-content a.button:hover, .ui-accordion-content a.button:active {
background-color:#FFFFFF;
color:#FBAF39;
}
.ui-accordion-content h6, .ui-accordion-content .lowlight, .ui-accordion-content .highlight, .ui-accordion-content .midlight, .ui-accordion-content h1 {
color:#FFFFFF;
}
.ui-accordion-content p, .ui-accordion-content .text {
color:#FFFFFF;
}
.ui-accordion ul {
margin:0;
font-family: 'Tienne'; font-weight: 400;
font-size:16px;
color:#FFFFFF;
line-height: 18px;
}
.ui-accordion .icon {
background-color:#FFFFFF;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
margin-right:10px;
}
Существует несколько пользовательских jquery, чтобы добавить прокрутку, когда аккордеон открывается очень высоко на мобильном телефоне.
Любая помощь очень ценится. Спасибо.
Как дружественное предложение, если вы собираетесь использовать такие вещи, как '-webkit-transition', не забудьте включить префиксы поставщика для Firefox, Internet Explorer, и Opera (и неподписанная версия тоже, последняя). По возможности обеспечивайте постоянный опыт;) – Sampson