隱藏/在jQuery中使用切換顯示div的方法

我正在尋找實現類似於在chrome extension page中的li的東西。我應該使用jQuery slideToggle嗎？也許有人可以提供某種樣品代碼我可以開始？（我是新來的jQuery）隱藏/在jQuery中使用切換顯示div的方法

來源

2012-03-27 Tom

請編輯您的問題，使其更容易理解 – Starx 2012-03-27 16:03:16

湯姆看看我的答案，看看如何模仿該行爲。 – 2012-03-27 16:25:12

你不需要任何複雜的插件，你可以做到這一切與jQuery。這是我抽出的一個快速樣本。真的很簡單。

的HTML

<div id="outer"> 
    <p>Some outer content </p> 
    <div id="inner">Slider Content </div> 
</div>

CSS的

#outer{ 
    height: 200px; 
    width: 200px; 
    background-color: brown; 
    overflow: hidden; 
    position: relative;  
} 
#inner{ 
    height: 200px; 
    width: 100%;  
    background-color: green; 
    position: absolute; 
    top: 100%; 
}

的JS

$('#outer').hover(
    function(){ 
     $('#inner').animate({ top: '0%' }, 'easein'); 
    }, 
    function(){ 
     $('#inner').animate({ top: '100%' }, 'easein'); 
    }   
    );

Here這是在行動。

來源

2012-03-27 16:19:08

退房這個帖子：jQuery & CSS - Remove/Add display:none

我認爲應該隱藏/顯示工作。

來源

2012-03-27 15:58:46 edhedges

它很難回答你的問題。但在顯示和隱藏一個div是很容易的，只要使用.toggle()

$("#mydiv").toggle();

來源

2012-03-27 16:01:31 Starx

但看看div是如何向上滑動的 – Tom 2012-03-27 16:02:30

您可以嘗試jQuery UI的手風琴，而不是你自己發明輪子。這些鏈接可能會幫助你。

http://docs.jquery.com/UI/Accordion

http://jquery.bassistance.de/accordion/demo/?p=1.1.2

來源

2012-03-27 16:02:26 jems

不需要插件，jquery就足夠了。看看我的帖子。 – 2012-03-27 16:21:01

當我確實需要一些東西時，我會先做一些Google搜索。我不會浪費時間創建自己的插件，當有許多優秀的插件具有複雜的功能時，使用插件並不困難和複雜，而不是編寫自己的代碼來模仿它。 – jems 2012-03-27 16:31:54

這並不複雜，它很容易。對於那些無法編碼的人來說，複雜化，在這種情況下，請繼續，幷包含數千行您並不需要的代碼。你的選擇。順便說一句，該插件甚至沒有真正做這個職位想要它做的事情。我不反對插件，只是針對不能爲自己思考並意識到何時簡單並且不需要臃腫插件的想法。我用8行代碼完成了這個插件，你建議有多少行代碼？ – 2012-03-27 16:45:24

隱藏/在jQuery中使用切換顯示div的方法

回答

相關問題