Javascript safari中浮动元素的父容器的宽度

我对safari中包含2个浮动元素的div的宽度有问题

其中一个浮动div的宽度设置为0，并在单击事件时使用jquery展开。safari中的父容器保留两个div的宽度，即使宽度设置为0

这里有一个这样的例子，除了Safari，在任何地方都可以工作。

HTML:

Javascript

$(document).ready(function() {

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

});​

---

我不知道这是否是你想要做的事情，但从视觉上看它是有效的

HTML

我用一个

包装了第2列文本，然后添加了一个hide（）和show（）（您可以进行切换或其他任何操作，这只是快速完成的），以便在更改另一个div的宽度时触发

似乎在Safari中你想要的效果

---

以下是。

我可以通过同时展开和折叠li包装来让它工作：

$(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')

})

}))；​

这是小提琴

$(document).ready(function() {

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

});​

<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>
​

$(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')

    })



});​

$(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')

})