Question

虽然firefox管理，但是Chrome拒绝将div折叠得比图片的高度更高。另外（但很小），即（正确？）包装图片周围的文字，而火狐由于某种原因我无法弄清楚文本似乎浮动正确。

感谢您的帮助！

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;
}

Answer 1

更改

.moreInfo
{
 padding: 2px;
}

到

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

MooTools手风琴不会在chrome＆amp; ie中折叠嵌套浮动

1 个答案: