像在这个特定网站上一样下拉文本答案

【问题标题】：Drop down text like on this particular website像在这个特定网站上一样下拉文本
【发布时间】：2012-06-03 13:34:28
【问题描述】：

我知道这是一个非常广泛的问题，但是当我尝试用谷歌搜索时，我得到的只是下拉菜单的答案。

我正在寻找下拉文本的代码，就像您单击问题时所做的 here 一样。或者至少是一个名称，以便我可以更具体地使用 Google 搜索。

【问题讨论】：

标签： javascript jquery css drop-down-menu

【解决方案1】：

这里有一个 Fiddle 代码来做到这一点：http://jsfiddle.net/Zy4gW/

HTML：

<ul id="q-and-a">
    <li><a>Question One</a>
      <div>Answer to Question One...</div>
    </li>
    <li><a>Question Two</a>
      <div>Answer to Question Two...</div>
    </li>
</ul>

CSS：

ul { margin: 0; padding: 0; }
ul li { margin: 0; padding: 0; list-style: none; }
ul li a { color: blue; }
ul li div { display: none; }

JQuery:

$(function(){

  $('#q-and-a li a').each(function(){
      $(this).click(function(){
          $(this).siblings('div').slideToggle(300);            
      });        
  });                

});

对于这么简单的事情，您可能不需要插件。只需设置正确的结构，然后显示/隐藏“显示”内容。

【讨论】：

谢谢，效果很好。例如，有没有办法可以链接到问题 2，当您单击链接时，文本已经打开？
你的意思是想让某人进入页面并且已经打开了一个？ IE。 yoursite.com/faqs#question2 是否已经有#2 处于打开状态？
这是执行此操作的代码：jsfiddle.net/Zy4gW/1 - 请注意，您需要将 id 添加到答案 div 和更多的 jQuery 优点...
很高兴听到。请采纳答案。

【解决方案2】：

这就是你所说的手风琴，还有jQueryUI has one。默认情况下，它的行为与网站中的不同，但可以配置为以相同的方式行为。

【讨论】：

看起来不错，你能链接到不同的部分吗？比如说，我想在打开网站时打开第 2 部分，这可能吗？