0

我正在自定义以下脚本：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,});

我试过 + + + + + css thingie 但我没有运气，但我已经上传了网站...... http://www.vernietig.be/depandoering/index2.html

4

2 回答 2

0

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

于 2013-01-24T00:45:09.250 回答
0

目前有几件事是错误的。首先，您添加的第二行代码实际上是一些链式方法的一部分。

您不需要添加的第一行代码。

在检查脚本之后，看起来该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 更改

在你的 css 中.ei_menu ul删除width: 1300px;

如果您不希望滚动条出现，您也可以overflow: scroll;从.ei_descr2.

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

您可以更改.ei_descr2您尝试width: 100%;的位置min-width: 300px;，这将导致 div 的最小宽度为 300 像素，并且如果需要，它们将扩展以获取更多内容。注意：您可以将min-width值更改为您喜欢的任何值。

于 2013-01-24T00:57:55.173 回答