縦型メニューをjQueryで作る

縦型メニューをjQueryで書いたら簡潔かつ論理的にできたのでここにメモっときます。

    $(document).ready(function()
        {
     $('ul#menu > li').click(function(){         
         $(this).next().slideToggle();
     });
        }); 

これだけです。いくつかポイントがあって、まずは next() で後続の要素を指定します。

入れ子の要素を指定しているわけではないので、サブメニューを記述する時には注意してください。

あとはどのような関数でも呼べばいいわけですが、ここでは slideToggle()で表示を切り替えています。

既出かもという気もするのですがなかなかエレガントなのでここに置いておきます。

    <ul id="menu">
      <li>Homepages</li>
      <ul>
   <li><a href="http://easai.web.fc2.com/biology/">Biology</a></li>
   <li><a href="http://easai.web.fc2.com/travel/">Travel</a></li>
   <li><a href="http://easai.web.fc2.com/phyla/">Phyla</a></li>
   <li><a href="http://easai.web.fc2.com/homepage/">Homepage</a></li>
   <li><a href="http://easai.web.fc2.com/biochemistry/">Biochemistry</a></li>
   <li><a href="http://easai.web.fc2.com/neuroscience/">Neuroscience</a></li>
      </ul>
      <li>Lignuistics</li>
 <ul>
            <li><a href="http://easai.web.fc2.com/linguistics/">Linguistics</a></li>
 </ul>
      <li>Nature series</li>
 <ul>
   <li><a href="http://easai.web.fc2.com/aves/">Aves</a></li>
   <li><a href="http://easai.web.fc2.com/eutheria/">Eutheria</a></li>
   <li><a href="http://easai.web.fc2.com/lepidoptera/">Lepidoptera</a></li>
   <li><a href="http://easai.web.fc2.com/odonata/">Odonata</a></li>
 </ul>
    </ul>

スタイルシートもあげておきます（２０１３－１２－０５）。

body
{
display:box;display:-moz-box;display:-webkit-box;display:-ms-flexbox;
}
ul#menu
{
width:180px;
font-family:sans-serif;
font-size:18px;
color:gray;
margin-left:10px;
margin-right:60px;
}
ul#menu,
ul#menu ul
{
  list-style:none;
  padding:0px;
}
ul#menu li
{
    border:1px solid #e0e0e0;
    background:#ececec;
    height:50px;
    padding:10px;    
}
ul#menu ul
{
    display:none;
}
ul#menu ul li
{
    background:#fafafa;
    font-size:16px;
    height:30px;
}
ul#menu ul a
{
    text-decoration:none;
    color:gray;
}