隐藏/在jQuery中使用切换显示div的方法

问题描述：

我正在寻找实现类似于在chrome extension page中的li的东西。我应该使用jQuery slideToggle吗？也许有人可以提供某种样品代码我可以开始？（我是新来的jQuery）隐藏/在jQuery中使用切换显示div的方法

请编辑您的问题，使其更容易理解 – 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这是在行动。

答

退房这个帖子：jQuery & CSS - Remove/Add display:none

我认为应该隐藏/显示工作。

答

它很难回答你的问题。但在显示和隐藏一个div是很容易的，只要使用.toggle()

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

但看看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

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

当我确实需要一些东西时，我会先做一些Google搜索。我不会浪费时间创建自己的插件，当有许多优秀的插件具有复杂的功能时，使用插件并不困难和复杂，而不是编写自己的代码来模仿它。 – jems 2012-03-27 16:31:54

这并不复杂，它很容易。对于那些无法编码的人来说，复杂化，在这种情况下，请继续，并包含数千行您并不需要的代码。你的选择。顺便说一句，该插件甚至没有真正做这个职位想要它做的事情。我不反对插件，只是针对不能为自己思考并意识到何时简单并且不需要臃肿插件的想法。我用8行代码完成了这个插件，你建议有多少行代码？ – 2012-03-27 16:45:24

隐藏/在jQuery中使用切换显示div的方法

相关推荐