0

次のスクリプトをカスタマイズしています：http：//tympanus.net/Tutorials/ExpandingImageMenu/index_3.html

しかし、6つのdiv（この場合は6人の男）の代わりに、最後の4つのdivがカスタムナビゲーションで開かれる11個のdivがあります。

ただし、最後の4 divのサイズを広くしたいのですが、可能であれば、コンテンツdivの右側を埋めるために可変サイズにします。

これはどのようにすればよいですか？

前もって感謝します！

/* get the item for the current */
var $item   = $menuItems.eq(current);
var $item2  = $menuItems + 7; /* i added this line */

＆

/* if not just show it */
$item.css({width : '400px'})
$item2.css({width : '700px'}) /* and this one */
.find('.ei_image')
.css({left:'0px', opacity:1,});

Iv'eは+++ + + cssを試しましたが、運が悪かったのですが、サイトをアップロードしました... http://www.vernietig.be/depandoering/index2.html

4

2 に答える 2

0

あなたはcssnth-childを使うことを試みることができます、以下のjsfiddleの例をチェックしてください

div{
    width:20px;
    height:100px;
    float:left;
    margin:1px;
    background:blue;
}
div:nth-child(n+7){
    width:100px;
}

http://jsfiddle.net/k39B7/1/

于 2013-01-24T00:45:09.250 に答える
0

現在、いくつか間違っていることがあります。まず、追加したコードの2行目は、実際にはいくつかの連鎖メソッドの一部です。

追加したコードの最初の行は必要ありません。

スクリプトを調べた後、current変数はトリガーリスト内のアイテムのゼロベースの配列インデックスを保持しているように見えます。ゼロベースでない場合は、以下のコードで6から7に変更する必要があります（または適切なものに変更する必要があります）。

私が提案するのは：

/* if not just show it */
var itemWidth = current < 6 ? '400px' : '700px';
$item.css({width : itemWidth})
.find('.ei_image')
.css({left:'0px', opacity:1,});

編集：変更するコードの別の行を含めるように更新します

OK、この行を変更してみることもできます：

itemParam   = (dir) ? {width : '400px'} : {width : '75px'},

に

itemParam   = (dir) ? current < 7 ? {width : '400px'} : {width : '700px'} : {width : '75px'},

編集2：アップデートでCSSの変更が見つかりました

.ei_menu ul削除するためのCSSでwidth: 1300px;

また、スクロールバーを表示したくない場合は、overflow: scroll;から削除することもできます.ei_descr2。

編集3：最後の4divが可変幅になるように更新します。

目的の.ei_descr2場所を変更するだけで、divの最小幅が300ピクセルになり、必要に応じてコンテンツが拡張されます。注：値は好きなように変更できます。width: 100%;min-width: 300px;min-width

于 2013-01-24T00:57:55.173 に答える