Jquery 如何优化此菜单？

给你

我试图让用户页面，他可以通过点击div的页面之间切换。问题是，我需要3个以上的分区，而这已经是非常混乱

<div id="dviOverdivWraper">
    <div class="containterBox">
        <div id="leftOver" style="background-color:blue">
        </div>
        <div id="rightOver" style="background-color:red">
        </div>
        <div id="thirdOver" style="background-color:yellow">
        </div>
    </div>
</div>

$（“#rightOver”）。单击（函数（）{
$（“#剩菜”）。设置动画({
宽度：“50px”
}，500，空）；
$（“#右上方”）。设置动画({
宽度：“400px”
}，500，空）；
$（“#第三方”）。制作动画({
宽度：“50px”
}，500，空）；
});
$（“#剩余”）。单击（函数（）{
$（“#右上方”）。设置动画({
宽度：“50px”
}，500，空）；
$（“#剩菜”）。设置动画({
宽度：“400px”
}，500，空）；
$（“#第三方”）。制作动画({
宽度：“50px”
}，500，空）；
});
$（“#第三方”）。单击（函数（）{
$（“#右上方”）。设置动画({
宽度：“50px”
}，500，空）；
$（“#剩菜”）。设置动画({
宽度：“50px”
}，500，空）；
$（“#第三方”）。制作动画({
宽度：“400px”
}，500，空）；
});

---

我如何优化它，因为我需要3个以上的div？

我建议使用水平手风琴，就像这里的一样：

还是在这里

附言：我刚刚在元素中添加了一个类

.box

。

将

class=“over”

添加到三个部分中的每一部分，然后您可以使用此代码：

$(document).ready(function () {
    $("#dviOverdivWraper .over").click(function() {
        if ($(this).width() == 50) {
            $("#dviOverdivWraper .over").not(this).animate({width: "50px"}, 500);
            $(this).animate({width: "400px"}, 500);
        }
    });
});​

您可以看到它在这里工作：

遵循不重复代码的枯燥原则，它自动支持您拥有的任何部分，而无需更改代码。

这将起作用。你可以。它不需要对HTML进行任何更改

$(document).ready(function () {
    $(".containterBox > div").click(function() {
       $(".containterBox > div").not(this).animate({
            width: "50px"
        }, 500, null);
       $(this).animate({
            width: "400px"
        }, 500, null);             
    });
});​​​

将

class=“myitem”

添加到您的div中

$(document).ready(function () {
    $(".myitem").first().animate({width:"400"});
    $(".myitem").not(":first").animate({width:"50"})
    $(".myitem").on("click",function(){
        $(".myitem").not(this).animate({width:"50"})    
        $(this).animate({width:"400"});                   
    });
});​

---

这是。

这不太好，因为我会在这些分区中有更多的div。@skmasq：您可以使用

$（“.containerBox>div”）

作为选择器。@Whymarrh这肯定是一个改进。我加上了，谢谢。为什么有人投了反对票？这是一段非常紧凑的代码，支持任意数量的节。它遵循不重复代码的枯燥原则，这也使它紧凑。向下投票人-如果你不解释你认为答案不合适的原因，你是否意识到你的投票没有什么效果。如果你想等到动画结束后再触发，请在动画函数中更改此：

$（'.box:not（：animated）

$(document).ready(function () {
    $(".myitem").first().animate({width:"400"});
    $(".myitem").not(":first").animate({width:"50"})
    $(".myitem").on("click",function(){
        $(".myitem").not(this).animate({width:"50"})    
        $(this).animate({width:"400"});                   
    });
});​