■
jqueryは面白い
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>アコーディオンメニュー</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> <script> ddだけだと全部しまってしまう。 not全部ひらいている first１つめだけひらいている $(function(){ $("dd:not(:first)").css("display","none"); $("dl dt").click(function(){ if($("+dd",this).css("display")=="none"){ $("dd").slideUp("slow"); $("+dd",this).slideDown("slow"); } }); });</script> <style> *{ margin: 0; padding: 0; } dl{ width: 400px; margin: 50px auto; } dl dt{ background: #F0F; border-bottom: 1px solid #00F; cursor: pointer; line-height: 2.6em; font-weight: bold; color: #F00; } dl dd{ border: 1px solid #F00; border-top: none; height: 300px; } </style> </head> <body> <dl> <dt>テキスト1</dt> <dd> <p>テキスト...（中略）...テキスト</p> </dd> <dt>テキスト2</dt> <dd> <p>テキスト...（中略）...テキスト</p> </dd> <dt>テキスト3</dt> <dd> <p>テキスト...（中略）...テキスト</p> </dd> <dt>テキスト4</dt> <dd> <p>テキスト...（中略）...テキスト</p> </dd> <dt>テキスト5</dt> <dd> <p>テキスト...（中略）...テキスト</p> </dd> <dt>テキスト6</dt> <dd> <p>テキスト...（中略）...テキスト</p> </dd> </dl> </body> </html>
