javascript - 像在这个特定网站上一样下拉文本

Question

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

我正在寻找下拉文本的代码，就像您单击问题时所做的那样。或者至少是一个名字，这样我就可以更具体地用谷歌搜索了。

Answer 1

这是一个小提琴的代码来做到这一点：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; }

查询：

$(function(){

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

});​​

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

Answer 2

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