Melaksanakan menu lungsur turun tiga peringkat berdasarkan jquery

Melaksanakan menu lungsur turun tiga peringkat berdasarkan jquery_jquery

WBOY

Lepaskan： 2016-05-16 09:00:08

asal

2740 orang telah melayarinya

Contoh dalam artikel ini berkongsi kod pelaksanaan khusus menu lungsur tiga peringkat jquery untuk rujukan anda. Kandungan khusus adalah seperti berikut

Apabila menulis ini, anda mesti terlebih dahulu menjelaskan pemikiran anda. Apabila anda mengklik pada satu menu, menu lain hendaklah ditutup Apabila anda mengklik pada menu peringkat pertama, menu peringkat kedua dan ketiga harus ditutup, dan seterusnya.
Kod anggaran adalah seperti berikut:

<body>
 <aside>
  <ul class="one">
   <li> <a href="#" class="a">目录A</a>
    <ul class="two" style="display: none">
     <li><a href="#" class="a">二级目录A</a>
      <ul class="three" style="display: none">
       <li><a href="#">三级目录A</a></li>
      </ul>
     </li>
     <li><a href="#" class="a">二级目录B</a></li>
     <li><a href="#" class="a">二级目录C</a></li>
    </ul>
   </li>
   <li> <a href="#" class="a">目录B</a>
    <ul class="two" style="display: none">
     <li><a href="#" class="a">二级目录A</a>
      <ul class="three" style="display: none">
       <li><a href="#">三级目录A</a></li>
      </ul>
     </li>
     <li><a href="#" class="a">二级目录B</a></li>
     <li><a href="#" class="a">二级目录C</a></li>
    </ul>
   </li>
   <li> <a href="#" class="a">目录C</a> </li>
  </ul>
 </aside>

//jQuery部分
<script src="js/jquery-1.8.3.min.js"></script>
<script>
  $(document).ready(function() {
   $('.a').click(function() {
    if ($(this).siblings('ul').css('display') == 'none') {
     $(this).siblings('ul').slideDown(100).children('li');
     if ($(this).parents('li').siblings('li').children('ul').css('display') == 'block') {
      $(this).parents('li').siblings('li').children('ul').slideUp(100);

     }
    } else {
     //控制自身菜单下子菜单隐藏
     $(this).siblings('ul').slideUp(100);
     //控制自身菜单下子菜单隐藏
     $(this).siblings('ul').children('li').children('ul').slideUp(100);
    }
   });
 });
</script>
</body>

Salin selepas log masuk

Jika anda ingin menambah gaya, pastikan anda memberi perhatian, jika tidak ralat mungkin muncul dalam menu.
Alamat kod lengkap: https://github.com/SabrinaTian/ThreeMenuNav.git
Terdapat juga kes dengan ikon dalam git Jika anda tidak mengkliknya, ia akan menjadi tanda + Selepas menu dibuka, ia akan bertukar kepada tanda -.
Perkara di atas adalah keseluruhan kandungan artikel ini, saya harap ia dapat membantu kajian semua orang.