Question

我有一个由divs容器组成的菜单，当我鼠标悬停在菜单项上时，我想要扩展下一个有一个叫做容器的类的元素，我想知道的是它们何时展开，我回到上一个div喜欢后面两个div我希望其他人在那里收缩宽度所以如果三个div打开并且我回到第一个div容器最后或者其他在前面合同那里宽度为0除了下一个div它显示下一个菜单项如何做到这一点任何例子将不胜感激。

<div class="container>
    <div class="menu">
        <div>Menu Item 1</div>
        <div>Menu Item 2</div>
        <div>Menu Item 3</div>
        <div>Menu Item 4</div>
    </div>
</div>
<div class="container>
    <div class="menu">
        <div>Menu Item 5</div>
        <div>Menu Item 6</div>
        <div>Menu Item 7</div>
        <div>Menu Item 8</div>
    </div>
</div>
<div class="container>
    <div class="menu">
        <div>Menu Item 9</div>
        <div>Menu Item 10</div>
        <div>Menu Item 11</div>
        <div>Menu Item 12</div>
    </div>
</div>

$('.container .menu .menu-item').mousenter(function() {
    $(this).closest('.container').next('.container').css('width' 200);
});

Answer 1

哇，这是一个很长的句子......请使用标点符号（并运行语法检查）。

在回答您的问题时，您可以在运行代码的下一行之前将所有容器的宽度设置为0，如下所示：

$('.container').css('width': 0);
$(this).closest('.container').next('.container').css('width' 200);

如果您使用此方法，您可能还应该在变量中保存$（'。container'）以获得更好的性能。

那是你想做的吗？如果没有，请更清楚地解释一下你的问题。

扩展和折叠菜单项

1 个答案: