Question

我正在自定义以下脚本：http://tympanus.net/Tutorials/ExpandingImageMenu/index_3.html

但不是6个div（或者在这种情况下是6个人），我有11个用自定义导航打开的4个最后一个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 thingie但我没有运气，但我上传了网站...... http://www.vernietig.be/depandoering/index2.html

Answer 1

您可以尝试使用css nth-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/

Answer 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,});

编辑：更新以包含要更改的另一行代码

好的，您也可以尝试更改此行：

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

到

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

编辑2：更新发现了css更改

在.ei_menu ul移除width: 1300px;

的css中

如果您不想显示滚动条，也可以从overflow: scroll;删除.ei_descr2。

编辑3：更新最后4个div以获得可变宽度。

您只需将尝试.ei_descr2的{{1}}更改为width: 100%;，这将导致div的最小宽度为300px，如果需要，它们将展开以获得更多内容。注意：您可以将min-width: 300px;值更改为您喜欢的任何值。

如何在javascript中为新添加的div指定另一个宽度

2 个答案: