jsFiddle DEMO 的

Question

我正在尝试创建用户页面，他可以通过单击div来切换页面。问题是，我需要更多3个div，这已经非常混乱了......

<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>

#dviOverdivWraper {
    width: 800px;
    height: 400px;
    margin: 0px auto;
    top: 200px;
    text-align:center;
}
#dviOverdivWraper .containerBox{
    width: 800px;
    height: 400px;
    margin: 0px auto;
    text-align:center;
}
#leftOver{
    width: 400px;
    height: 200px;
    float: left;
}
#rightOver, #thirdOver{
    width: 50px;
    height: 200px;
    float: left;
}

$("#rightOver").click(function () {
    $("#leftOver").animate({
        width: "50px"
    }, 500, null);
    $("#rightOver").animate({
        width: "400px"
    }, 500, null);
    $("#thirdOver").animate({
        width: "50px"
    }, 500, null);
});
$("#leftOver").click(function () {
    $("#rightOver").animate({
        width: "50px"
    }, 500, null);
    $("#leftOver").animate({
        width: "400px"
    }, 500, null);
    $("#thirdOver").animate({
        width: "50px"
    }, 500, null);
});
$("#thirdOver").click(function () {
    $("#rightOver").animate({
        width: "50px"
    }, 500, null);
    $("#leftOver").animate({
        width: "50px"
    }, 500, null);
    $("#thirdOver").animate({
        width: "400px"
    }, 500, null);
});

我如何优化它，因为我需要超过3个div？

Answer 1

jsFiddle DEMO 的

    // SET MIN WIDTH:
    var minW = 50;
    // SET MAX WIDTH:
    var maxW = 400;
    // SET INITIALLY OPENED BOX:
    var openBox = 1;
    // SET ANIMATION SPEED (in milliseconds)
    var speed = 400;
    //////////////////////

$('.box').eq(openBox-1).width(maxW).siblings().width(minW); // initial setup

function animate(){
   $('.box').eq(openBox).stop().animate({width: maxW},speed).siblings().animate({width: minW},speed);            
}

$('.box').on('click', function(){
   openBox = $(this).index();
   animate();                    
});

P.S：我刚给你的元素添加了一个课程.box。

Answer 2

将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);
        }
    });
});

你可以在这里看到它：http://jsfiddle.net/jfriend00/5UbQM/。

遵循不重复代码的DRY原则，它会自动支持您拥有的许多部分而无需更改代码。

Answer 3

这会奏效。你可以try it out in this jsfiddle。它不需要对您的HTML进行任何更改。

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

Answer 4

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

http://nicolahibbert.com/demo/liteAccordion/

或在这里

http://jquerytools.org/demos/tabs/accordion-horizontal.html

Answer 5

将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"});                   
    });
});

这里是jsfiddle。

如何优化此菜单？

5 个答案:

jsFiddle DEMO 的