4

サファリに2つのフロート要素を含むdivの幅に問題があります。

フロートされたdivの1つは、幅が0に設定されており、クリックイベントでjqueryを使用して展開されます。サファリの親コンテナは、幅が0に設定されている場合でも、両方のdivの幅を保持します。

ここにこの例があり、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')
});

});​
4

2 に答える 2

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>、hide（）とshow（）を追加して（トグルなど、これをすばやく実行できます）、他のdivの幅を変更しているときに起動します。

Safariで思い通りに動作するようです。

これがフィドルです。

于 2012-12-11T17:06:33.087 に答える
0

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

})

}）; </ p>

これがフィドルですhttp://jsfiddle.net/AnjXH/

于 2012-12-11T17:16:00.727 に答える