Wie kann ich dieses Menü optimieren?

Question

Hier ist jsfiddle!

Ich versuche, Benutzer-Seite zu machen, wo er zwischen den Seiten wechseln kann, indem er auf divs klickt. Das Problem ist, werde ich mehr als 3 divs braucht, und das ist schon sehr chaotisch ...

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

Wie kann ich es zu optimieren, weil ich mehr als 3 divs benötigen?

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

S.S: Ich habe gerade eine Klasse .box zu Ihren Elementen hinzugefügt.

Answer 2

Ich würde vorschlagen, horizontal Akkordeon mit, wie das hier:

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

oder hier

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

Answer 3

class="over" zu jedem der drei Abschnitte hinzufügen und dann können Sie diesen Code verwenden: http://jsfiddle.net/jfriend00/5UbQM/:

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

Sie können es hier sehen arbeiten.

Das folgt den DRY-Prinzipien, den Code nicht zu wiederholen, und es unterstützt automatisch viele Abschnitte, die Sie haben, ohne den Code überhaupt zu ändern.

Answer 4

Dies wird funktionieren. Sie können try it out in this jsfiddle. Es erfordert keine Änderungen an Ihrem HTML.

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

Answer 5

Fügen Sie Ihren Divs class="myitem" hinzu.

$(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"});     
    }); 
});​ 

hier ist die jsfiddle.