javascript 在这个特定的网站上下拉文本

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10870797/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 11:19:12  来源:igfitidea点击:

Drop down text like on this particular website

javascriptjquerycssdrop-down-menu

提问by Fawky

I know this is a really broad question, but when I try to google it all I get is the answer for a drop down menu.

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

I'm looking for the code for the dropdown text like it's done herewhen you click on a question. Or at least a name so I can google more specifically.

我正在寻找下拉文本的代码,就像单击问题时在此处完成的那样。或者至少是一个名字,所以我可以更具体地谷歌。

回答by Fluidbyte

Here's a Fiddle with the code to do this: http://jsfiddle.net/Zy4gW/

这是一个带有代码的小提琴:http: //jsfiddle.net/Zy4gW/

HTML:

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:

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);            
      });        
  });                

});??

You probably don't need a plugin for something this simple. Just setup the right structure and then show/hide the 'reveal' content.

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

回答by Joseph

That's what you call an accordion, and jQueryUI has one. By default, it doesn't act like the one in the website, but it can be configured to act the same way.

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