16-解决方案

7.3.2　解决方案

1．HTML

<div id="accordionWrapper">
　 <h3 class="red"><a href="#red">Red</a></h3>
　 <div id="red" class="box"><p>Lorem ipsum dolor sit amet, consectetur
adipisicing.</p></div>
　 <h3 class="green"><a href="#green">Green</a></h3>
　 <div id="green" class="box"><p>Lorem ipsum dolor sit amet, consectetur
adipisicing.</p></div>
　 <h3 class="blue"><a href="#blue">Blue</a></h3>
　 <div id="blue" class="box"><p>Lorem ipsum dolor sit amet, consectetur
adipisicing.</p></div>
</div>

2．CSS

#accordionWrapper {
　 margin: 10px;
}
#accordionWrapper h3 a {
　 text-indent: -9999px;
　 height: 150px;
　 width: 50px;
　 float: left;
}
#accordionWrapper .red {
　 background: #c00 url(images/red.png) no-repeat;
}
#accordionWrapper .green {
　 background: #0c0 url(images/green.png) no-repeat;
}
#accordionWrapper .blue {
　 background: #00c url(images/blue.png) no-repeat;
}
#accordionWrapper div.box {
　 float: left;
　 height: 150px;
　 width: 150px;
　 border: 0;
　 margin: 0;
　 /* to cancel the image from .red, etc */
　 background-image: none;
}

3．jQuery

$.fn.horizontalAccordion = function (speed) {
　 return this.each(function () {
　　　var $accordionHeaders = $(this).find('h3'),
　　　　 $open = $accordionHeaders.next().filter(':first'),
　　　　 width = $open.outerWidth();
　　　//初始化显示
　　　$accordionHeaders.next().filter(':not(:first)').css({ display : 'none', width : 0
});
　　　$accordionHeaders.click(function () {
　　　　 if ($open.prev().get(0) == this) {
　　　　　　return;
　　　　 }
　　　　 $open.animate({ width: 0 }, { duration : speed });
　　　　 $open = $(this).next().animate({ width : width }, { duration : speed });
　　　});
　 });
};
$(document).ready(function () {
　 $('#accordionWrapper').horizontalAccordion(200);
});