野生動物園中浮動元素的父容器的寬度

Question

我遇到了包含Safari中2個浮動元素的div的寬度問題。

其中一個浮動div的寬度設置爲0，並在jquery上單擊事件進行擴展。 Safari中的父容器保留了兩個div的寬度，即使寬度設置爲0時也是如此。

這裏有一個例子，除Safari之外的其他所有工作。 http://jsfiddle.net/XUR7R/6/

HTML：

<div class="item-list"> 
    <ul> 
     <li class="article"> 
       <div class="column"> 
        Column 1<br/> 
        <a href="#" class="expand">toggle</a><br/> 
       </div> 
       <div class="column expandableColumn"> 
        Column 2 content 
       </div> 
     </li>       
    </ul> 
</div> 

CSS

.item-list{ 
overflow:hidden;    
} 

.article{ 
float:left; 
overflow:hidden; 
background:#555; 
padding:5px;  
} 

.column{ 
float:left; 
height:100px; 
width:100px; 
background:red;  
} 

.expandableColumn{ 
width:0;   
}​ 

的Javascript

$(document).ready(function() { 

$('.expand').click(function() { 
    if ($(this).hasClass('.expanded')) { 
     $('.expandableColumn').animate({ 
      'width': '0px' 
     }); 
    } 
    else { 
     $('.expandableColumn').animate({ 
      'width': '100px' 
     }); 
    } 
    $(this).toggleClass('.expanded') 
}); 

});​ 

Answer 1

我不知道這是否是你要去想要做的事，但它在視覺上起作用。

HTML

<div class="item-list"> 
    <ul> 
     <li class="article"> 
       <div class="column"> 
        Column 1<br/> 
        <a href="#" class="expand">toggle</a><br/> 
       </div> 
       <div class="column expandableColumn"> 
        <p>Column 2 content</p> 
       </div> 
     </li>       
    </ul> 
</div> 
​ 

JS

$(document).ready(function() { 
      $('.expandableColumn p').hide(); 

    $('.expand').click(function() { 
     if ($(this).hasClass('.expanded')) { 
      $('.expandableColumn').animate({ 
       'width': '0px' 
      }); 
      $('.expandableColumn p').hide(); 
     } 
     else { 
      $('.expandableColumn').animate({ 
       'width': '100px' 
      }); 
      $('.expandableColumn p').show(); 
     } 
     $(this).toggleClass('.expanded') 

    }) 



});​ 

我包的第2欄文本與<p>，然後加入一躲（）和show（）（你可以做切換或任何太，這是隻是做得很快），當你改變另一個div的寬度時觸發。

似乎在safari中如何使用它。

這是fiddle。

Answer 2

我能得到它的擴大，並在同一時間摺疊李包裝工作：

$(document).ready(function() { 

$('.expand').click(function() { 
    if ($(this).hasClass('.expanded')) { 
     $('.article').animate({ 
      'width': '100px' 
     }); 
     $('.expandableColumn').animate({ 
      'width': '0px' 
     }); 
    } 
    else { 
     $('.article').animate({ 
      'width': '200px' 
     }); 
     $('.expandableColumn').animate({ 
      'width': '100px' 
     }); 
    } 
    $(this).toggleClass('.expanded') 

}) 

}）;

這裏是小提琴http://jsfiddle.net/AnjXH/