javascript - Drop down text like on this particular website - Stack Overflow

admin管理员组

文章数量:1300197

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 here when you click on a question. Or at least a name so I can google more specifically.

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 here when you click on a question. Or at least a name so I can google more specifically.

• javascript
• jquery
• css
• drop-down-menu

Share Follow edited Jun 3, 2012 at 14:58 Gilles 'SO- stop being evil' 108k3838 gold badges215215 silver badges260260 bronze badges asked Jun 3, 2012 at 13:34 FawkyFawky 4111 gold badge44 silver badges77 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Here's a Fiddle with the code to do this: http://jsfiddle/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);            
      });        
  });                

});​​

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

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.

本文标签： javascriptDrop down text like on this particular websiteStack Overflow