MooTools 手风琴不会折叠 chrome&ie 中的嵌套浮动

发布于 2024-09-04 16:44:07 字数 2828 浏览 3 评论 0原文

虽然 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

待"谢繁草 2024-09-11 16:44:07

更改

.moreInfo
{
 padding: 2px;
}

.moreInfo
{
   padding: 2px;
   overflow: hidden;
}

Change

.moreInfo
{
 padding: 2px;
}

to

.moreInfo
{
   padding: 2px;
   overflow: hidden;
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文