jquery 가로 아코디언이 항상 100 % 너비를 차지하도록하려면 어떻게해야합니까?

Question

나는 플러그인을 사용하지 않고도 내 자신의 수평 아코디언을 개발하려고합니다. 전체 브라우저 창 너비를 차지해야합니다. 아코디언 섹션은 마우스 센터에서 열립니다.

섹션이 다른 섹션 위로 마우스를 올리기 전에 완전히 확장 될 수 있도록 제공하는 것이 더 많거나 적습니다. 그러나 섹션이 빠르게 넘치면 '선택됨'섹션에 따라 아코디언의 전체 너비가 줄어 듭니다. 더 작은 섹션보다 더 오래 자랄 수 있습니다.

아코디언을 100 % 브라우저 너비로 유지해야하지만이 작업을 수행하기 위해 내가 무엇을해야하는지 잘 모르겠습니다.

(http://jsfiddle.net/AUu9E/)를 설명하기 위해 jsFiddle을 만들었으므로 마우스를 빠르게 실행하여 해결하려는 문제를 확인하십시오.

미리 감사드립니다.

var qtySect = 6; 
var windowWidth = $(window).width(); 
var selectedWidth = windowWidth * 0.7; 
var unselectedWidth = windowWidth * 0.3/(qtySect - 1); 
$("nav ul li").fadeTo(0,0.6); 
    //set initial widths 
$(".unselected").css("width", unselectedWidth); 
$(".liHome").css("width",selectedWidth).addClass("selected"); 
    //mouseover animate 
$("nav ul li").mouseenter(function() { 
    if ($(this).hasClass("unselected")){ 
      $(this).animate({ width: selectedWidth }, { queue: false, duration: 1000, easing: "linear" }) 
     $(".selected").animate({ width: unselectedWidth }, { queue: false, duration: 1000, easing: "linear" }); 
     $(".selected").addClass("unselected").removeClass("selected"); 
     $(this).addClass("selected").removeClass("unselected"); 
    } 
}); 

Answer 1

음, 대신 비율을 사용할 수 없습니까? 코드를 많이 삭제하는 것 같습니다 :

"STEP"절차를 사용하여 서로를 따라갈 필요가있는 것처럼 보입니다. 등의 예는 여기에서 찾을 수 있습니다 http://www.protofunc.com/scripts/jquery/animate-step/

http://jsfiddle.net/AUu9E/3/

HTML

<nav> 
      <ul> 
       <li class="liHome">home</li> 
       <li class="liRsvp">rsvp</li> 
       <li class="liStory">story</li> 
       <li class="liVenue">venue</li> 
       <li class="liGuestbook">guestbook</li> 
       <li class="liGallery">gallery</li> 
      </ul> 
</nav> 

JS

//Remove 1 element(selected), and find the width of the rest(unselected) 
var qtySect = 6-1; 
var unselectedWidth = 40/qtySect +"%"; 
var selectedWidth = 60+"%"; 

    //set initial widths 
$("nav ul li:first-child").addClass('selected'); 
$("nav ul li").not(':first-child').addClass('unselected'); 
$(".unselected").css("width", unselectedWidth); 
$(".selected").css("width",selectedWidth); 
    //mouseover animate 
$("nav ul li").mouseenter(function() { 
    if ($(this).hasClass("unselected")){ 
     $(this).animate({ width: selectedWidth }, { queue: false, duration: 1000, easing: "linear" }) 
     $(".selected").animate({ width: unselectedWidth }, { queue: false, duration: 1000, easing: "linear" }); 
     $(".selected").addClass("unselected").removeClass("selected"); 
     $(this).addClass("selected").removeClass("unselected"); 
    } 
});