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

Stack Overflow用户

提问于 2012-12-11 16:33:10

回答 2查看 286关注 0票数 4

我在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')
});

});

javascript

html

css

safari

mobile-safari

媒体处理1元起

智能、强大、全面的多媒体数据处理服务，助您提升媒体质量、降低成本，媒体处理套餐低至1元

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-12-11 17:06:33

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

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>

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

    })



});

我用一个<p>包住了第二列的文本，然后添加了一个hide()和show() (你也可以做切换或其他任何事情，这是很快的事情)，在你改变另一个div的宽度时触发。

在Safari中看起来像你想要的那样工作。

这是fiddle。

票数 1

Stack Overflow用户

发布于 2012-12-11 17:16:01

通过同时展开和折叠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')

})