jQuery：如何在沒有jQuery UI的情況下重現Accordion的滑出效果？

我只是在學習jQuery，弄清楚什麼是可能的，找到我的路。jQuery：如何在沒有jQuery UI的情況下重現Accordion的滑出效果？

我想要一個div像手風琴一樣「滑出」，但我不想支付jQuery UI下載的費用，並且我想讓多個div在相同的位置打開時間。

它是如何工作的？在jquery.ui.accordion.js中，手風琴的滑出效果如何？我可以撥打.animate()將電話號碼從display:none移至display:block嗎？（我讀過的動畫僅適用於數字屬性。）

2009-12-16 Cheeso

我正在學習各種各樣的東西。我只使用jQuery - 沒有UI，沒有UI手風琴，沒有UI效果 - 並獲得了我想要的滑下效果。不確定這種視覺效果的術語。（我認爲這是jQuery的一半挑戰 - 我稱之爲各種效果）。我想也許有些人稱之爲「切換百葉窗」。

點擊此處，查看效果：http://jsbin.com/ogape

這裏的HTML片段

<div id="div0"> 
    <p id="intro"><a href="#" class='expander'>+</a> Introduction</p> 

    <div class='indented' style='display:none'> 
    <p > 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer 
     vulputate, nibh non rhoncus euismod, erat odio pellentesque lacus, 
     sit amet convallis mi augue et odio. Phasellus cursus urna facilisis quam. 
    </p> 

    <p> Quisque pharetra lacus quis sapien. Duis 
     id est non wisi sagittis adipiscing. Nulla facilisi. Etiam quam erat, 
     lobortis eu, facilisis nec, blandit hendrerit, metus. Fusce 
     hendrerit. Nunc magna libero, sollicitudin non, vulputate non, ornare 
     id, nulla. Suspendisse potenti. Nullam in mauris. 
    </p> 
    </div> 
</div>

這是jQuery代碼：

var slideOut = function(element){ 
     var parent = $(element).parent().parent(); // outer div 
     var dList = parent.children("div"); // inner div, all siblings of the <a> 
     dList.animate({opacity: 'toggle', height: 'toggle'}, 'slow'); 
    }; 

    $(document).ready(function() { 
     $('div p a[href="#"]').click(function() { slideOut(this); }); 
    });

這滑出式（）函數稍微從什麼簡化它實際上是。它還交換+和 - 在實際代碼擴展按鈕，這使得它更復雜一點：

var slideOut = function(element){ 
     var parent = $(element).parent().parent(); // outer div 
     var dList = parent.children("div"); // inner div, all siblings of the <a> 
     dList.animate({opacity: 'toggle', height: 'toggle'}, 'slow'); 

     // swap characters on the expander "button" 
     var o = dList.css("opacity"); 
     // dash is narrower than +, so we must compensate 
     if (o==1) { 
      $(element).html("+") 
       .css("padding-left", "1px") 
       .css("padding-right", "1px"); 
     } else { 
      $(element).html("-") 
       .css("padding-left", "3px") 
       .css("padding-right", "3px"); 
     } 
    };

您可以在上面提到的現場演示鏈接看到完整的HTML/JS代碼。

我不知道的關鍵是可以通過調用帶有「切換」的動畫生成動畫高度。

來源

2009-12-16 04:51:27 Cheeso

如果要創建垂直手風琴，則可以使用slideDown和slideUp;否則，需要組合更多CSS以允許在定位時使用動畫的一些divs。

來源

2009-12-16 04:18:43 Aaron

僅供參考，jQueryUI和核心中的縮小滑動效果在第一個請求中僅爲5.5KB。不需要整個jQueryUI庫。您需要的文件 - ui.slider.min.js和ui.core.min.js

來源

2009-12-16 04:24:03

您可以對一個元素執行此操作。

var accordion = function(toggleEl, accEl) { 
    toggleEl.click(function() { 
     accEl.slideToggle(function() { }); 
     return false; 
    }); 
}

使用的slideToggle

http://docs.jquery.com/Effects/slideToggle

但是，如果你想要做的多層次，您將需要還添加了一個功能要經過的所有項目和滑動起來或者的slideToggle之前隱藏如果您只想要一次打開一個項目，則會觸發。這是jquery手風琴可以提供幫助的地方。他們有許多這樣的選擇。

來源

2009-12-16 04:29:48

是基於jQuery的slideToggle？還是有一個單獨的模塊或插件？ – Cheeso 2009-12-16 05:03:05

slideToggle在基礎jQuery中，這很好。但是，我在IE中收到了一些奇怪的動畫文物。當div出現時，在幻燈片的末尾有一個跳躍步驟。我做''時看不到這個。animate（{height：'toggle'}）' – Cheeso 2009-12-16 05:10:21

如果工作正常，您也可以這樣做。無論如何，我相信它就是這樣。 – 2009-12-16 05:15:15

jQuery：如何在沒有jQuery UI的情況下重現Accordion的滑出效果？

回答

相關問題