如何確保我的jquery水平手風琴始終佔用100％的寬度？

我正在嘗試開發自己的橫向手風琴，而無需使用插件。它應占用完整的瀏覽器窗口寬度。手風琴部分在mouseenter上打開。如何確保我的jquery水平手風琴始終佔用100％的寬度？

它或多或少地工作（假設該部分在懸停在另一個之上之前被允許完全展開），但是，如果這些部分快速展開，手風琴的整個寬度會隨着「選定」部分的縮小而縮小比小節更長。

我需要讓手風琴保持100％的瀏覽器寬度，但我不確定我需要做些什麼來實現這一點。

我已經創建了一個jsFiddle來說明（http://jsfiddle.net/AUu9E/），快速運行鼠標以查看我正在嘗試解決的問題。

非常感謝提前。

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

來源

2011-10-21 Fisu

只是一個評論，不知道你的要求，但結合到click事件會更好我的想法是。 – dstarh

嗯，難道你不能用百分比代替嗎？似乎消除了很多代碼:)

看來你需要使用「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>

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

來源

2011-10-21 17:19:16

是的，我認爲這可能是我需要的步驟功能。感謝您的鏈接，但是對於我來說並不瞭解德語，我發現很難遵循教程。看起來我可以在互聯網上找到很少的'步驟'教程，但我會繼續尋找。另外，感謝關於使用百分比的建議，更合理。 – Fisu

這似乎工作得很好：http://jsfiddle.net/AUu9E/8/ - 試圖實現德國步驟的事情，但我的德國不是超級要麼：/ –

您的jsFiddle工作很好，比以前好得多最後只是輕微的「搖擺」。我剛纔在這裏問到如何正確使用step函數，但現在看來我可能不需要它。非常感謝您的幫助。 – Fisu

如何確保我的jquery水平手風琴始終佔用100％的寬度？

回答

相關問題