3

私は自分の仕事の一部をフィルタリングする順序付けられていないリストを持っていることを考えています。私はフィルターを完全に正常に機能させており（この例ではありません）、現在、スタイリングが困難な段階にあります。divの幅を設定してオンライン調査を行ってみましたが、成功しませんでした。

現在、次のようになっています：http: //jsfiddle.net/XcVHU/

私が望んでいるのは、最初は2つの単語（[フィルター]と[すべて]）のみが表示され、ユーザーが[フィルター]という単語にカーソルを合わせるかクリックすると、リストがCSS幅遷移で展開され、他のカテゴリ（Web、それでも、モーションとゲーム）。だから、これから：

フィルター| 全て

これに：

フィルター| Web | それでも| モーション| ゲーム

4

3 に答える 3

6

次のようなものをネストするとよいでしょうul...

<div id="portfolionav">
    <ul class="filter">
        <li>Filter</li>
        <ul class="subfilters">
           <li class="web"><a href="#">Web</a></li>
           <li class="still"><a href="#">Still</a></li>
           <li class="motion"><a href="#">Motion</a></li>
           <li class="games"><a href="#">Games</a></li>
        </ul>
        <li class="current all"><a href="#">All</a></li>
    </ul>    
</div>​

トランジションのCSSの変更は非常に簡単です。

#portfolionav ul {
    display: inline-block;
    white-space: nowrap;
   -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;

}
#portfolionav ul ul {width: 0; opacity: 0;}

#portfolionav ul:hover > ul {width: 370px; opacity: 1;}

http://jsfiddle.net/jukUm/

于 2012-08-26T11:06:38.957 に答える
3

アップデート：

アニメーションと修正された行の高さのバグを含む最終バージョンは次のとおりです：http：//jsfiddle.net/XcVHU/9/

アニメーションなしの別の解決策：

http://jsfiddle.net/XcVHU/4/

何をすべきか：

  1. フィルタを個別のネストされたULに配置します
  2. 表示をインラインに設定します。
  3. ドキュメントの準備ができている非表示フィルター
  4. クリックすると、表示プロパティを切り替えます。

このソリューションは、@ PeterSzymkowskiが提供するソリューションのようにバグがなく、@ Duopixelのソリューションよりも見栄えがします（これはとにかく優れており、アイテムがページの正しいエンジの外に表示されて実行されるときにその種のアニメーションを好む場合は、まだ適している可能性があります位置に）。

アップデート：

これがアニメーション版で、いくつかの変更が加えられています。ここをチェックしてください：

http://jsfiddle.net/XcVHU/7/

于 2012-08-26T11:55:31.960 に答える
2

ul.filter2つに分割しul、いくつかのコードを使用します。

$('#expand').click(function(e){
    e.preventDefault();
    $('.filter.hidden').show();
    var tw = $('.filter.hidden').width();
    $('.filter.hidden').css('width', '0px');
    $('.filter.hidden').animate({width: tw+'px'});

});
于 2012-08-26T11:03:44.333 に答える