MooTools 手风琴不会折叠 chrome&ie 中的嵌套浮动
虽然 Firefox 可以做到这一点,但 ie 和 chrome 拒绝将 div 折叠到超过图片高度的高度。另外(但次要),ie(正确吗?)将文本包裹在图片周围,而 Firefox 由于某种原因我无法弄清楚文本是否似乎正确浮动。
感谢您的帮助!
JavaScript:
window.addEvent('domready', function(){
$$( '.bio_accordion' ).each(function(item){
var thisSlider = new Fx.Slide( item.getElement( '.moreInfo' ), { mode: 'horizontal' } );
thisSlider.hide();
item.getElement('.moreInfo').set('tween').tween('height', '0px');
var morph = new Fx.Morph(item.getElement( '.divToggle' ));
var selected = 0;
item.getElement( '.divToggle' ).addEvents({
'mouseenter': function(){
if(!selected) this.morph('.div_highlight');
},
'mouseleave': function(){
if(!selected) {
this.morph('.divToggle');
}
},
'click': function(){
if (!selected){
if (this.getElement('.symbol').innerHTML == '+')
this.getElement('.symbol').innerHTML = '-';
else
this.getElement('.symbol').innerHTML = '+';
thisSlider.slideIn();
item.getElement('.moreInfo').set('tween', {
duration: 1500,
transition: Fx.Transitions.Bounce.easeOut
}).tween('height', '650px');
selected = 1;
}
else{
if (this.getElement('.symbol').innerHTML == '+')
this.getElement('.symbol').innerHTML = '-';
else
this.getElement('.symbol').innerHTML = '+';
thisSlider.slideOut();
item.getElement('.moreInfo').set('tween', {
duration: 1500,
transition: Fx.Transitions.Bounce.easeOut
}).tween('height', '0px');
selected = 0;
}
}
});
} );
});
HTML:
<div class="bio_accordion">
<div class="divToggle">Lorem Ipsum<span class="symbol">-</span></div>
<div class="moreInfo" style="margin-left:10px;">
<div class="photo"><img src="http://loremipsum.com/images/3.jpg" /></div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
CSS:
.bio_accordion
{
padding:0px;
margin:0px;
}
.divToggle
{
cursor: pointer;
color: #ffffff;
background-color:#1089b5;
padding: 8px;
}
.div_highlight
{
padding-left:30px;
padding-right:30px;
background-color:#096687;
}
.moreInfo
{
padding: 2px;
}
.symbol
{
float:right;
}
.photo
{
float:left;
padding-right:10px;
height:inherit;
}
While firefox manages, ie and chrome refuse to collapse the div any further than the height of the picture. Additionally (but minor), ie (properly?) wraps the text around the picture, while firefox for some reason i can't figure out has the text seem to float right.
Thanks for any help!
The javascript:
window.addEvent('domready', function(){
$( '.bio_accordion' ).each(function(item){
var thisSlider = new Fx.Slide( item.getElement( '.moreInfo' ), { mode: 'horizontal' } );
thisSlider.hide();
item.getElement('.moreInfo').set('tween').tween('height', '0px');
var morph = new Fx.Morph(item.getElement( '.divToggle' ));
var selected = 0;
item.getElement( '.divToggle' ).addEvents({
'mouseenter': function(){
if(!selected) this.morph('.div_highlight');
},
'mouseleave': function(){
if(!selected) {
this.morph('.divToggle');
}
},
'click': function(){
if (!selected){
if (this.getElement('.symbol').innerHTML == '+')
this.getElement('.symbol').innerHTML = '-';
else
this.getElement('.symbol').innerHTML = '+';
thisSlider.slideIn();
item.getElement('.moreInfo').set('tween', {
duration: 1500,
transition: Fx.Transitions.Bounce.easeOut
}).tween('height', '650px');
selected = 1;
}
else{
if (this.getElement('.symbol').innerHTML == '+')
this.getElement('.symbol').innerHTML = '-';
else
this.getElement('.symbol').innerHTML = '+';
thisSlider.slideOut();
item.getElement('.moreInfo').set('tween', {
duration: 1500,
transition: Fx.Transitions.Bounce.easeOut
}).tween('height', '0px');
selected = 0;
}
}
});
} );
});
The HTML:
<div class="bio_accordion">
<div class="divToggle">Lorem Ipsum<span class="symbol">-</span></div>
<div class="moreInfo" style="margin-left:10px;">
<div class="photo"><img src="http://loremipsum.com/images/3.jpg" /></div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
The css:
.bio_accordion
{
padding:0px;
margin:0px;
}
.divToggle
{
cursor: pointer;
color: #ffffff;
background-color:#1089b5;
padding: 8px;
}
.div_highlight
{
padding-left:30px;
padding-right:30px;
background-color:#096687;
}
.moreInfo
{
padding: 2px;
}
.symbol
{
float:right;
}
.photo
{
float:left;
padding-right:10px;
height:inherit;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
更改
为
Change
to