jQuery ile Sınırsız Açılır (Akordiyon) Menü Örneği

Yaptığınız tasarımlarda basit ve kullanışlı bir menü örneği yapıyoruz. Öncelikle uygulamamızın tasarımı için CSS kodlarını yazalım

*{margin:0px;padding:0px;border:0px;font-size:100%;font:inherit;vertical-align:baseline;border-spacing:0px;outline:none;}
body, html{font-family:'Arial', Helvetica, sans-serif;font-size:12px;color:#444;line-height:20px;background-color:#fff;}
.menu-kapsul {width:200px;margin:20px auto;}
.menu-kapsul ul{list-style-type:none;}
.menu-kapsul ul li{display:block;margin-left:10px;}
.menu-kapsul ul li a{color:blue;text-decoration:none;}
.menu-kapsul ul li span{display:block;line-height:20px;background:#e3e3e3;margin-bottom:1px;padding:0px 5px;}
.menu-kapsul > ul li ul{display:none;}

$(document).ready(function () {
   $(".menu-kapsul a").click(function () {
      $(this).parent("li").children("ul").slideUp("slow");
         if ($(this).next("ul").css("display") == 'none') {
            $(this).next("ul").slideDown("slow");
         }
      });
});

   <div class="menu-kapsul">
      <ul>
         <li>
            <a href="javascript:;"><span>Menü A</span></a>
               <ul>
                  <li><span>A1</span></li>
                  <li><span>A2</span></li>
                  <li>
                     <a href="javascript:;"><span>A3</span></a>
                        <ul>
                           <li><span>A3 - 1</span></li>
                           <li><span>A3 - 2</span></li>
                           <li><span>A3 - 3</span></li>
                        </ul>
                     </li>
                  </ul>
               </li>
               <li>
                  <a href="javascript:;"><span>Menü B</span></a>
                  <ul>
                     <li><span>B1</span></li>
                        <li>
                        <a href="javascript:;"><span>B2</span></a>
                        <ul>
                            <li>
                                <a href="javascript:;"><span>B2 - 1</span></a>
                                <ul>
                                    <li><span>B2 - 1 - 1</span></li>
                                    <li>
                                        <a href="javascript:;"><span>B2 - 1 - 2</span></a>
                                        <ul>
                                            <li><span>B2 - 1 - 2 - 1</span></li>
                                            <li><span>B2 - 1 - 2 - 2</span></li>
                                            <li><span>B2 - 1 - 2 - 3</span></li>
                                        </ul>
                                    </li>
                                    <li><span>B2 - 1 - 3</span></li>
                                </ul>
                            </li>
                            <li><span>B2 - 2</span></li>
                            <li><span>B2 - 3</span></li>
                        </ul>
                    </li>
                    <li><span>B3</span></li>
                </ul>
            </li>
        </ul>
    </div>