cari

Rumah >hujung hadapan web >tutorial js >Melaksanakan menu lungsur turun tiga peringkat berdasarkan jquery_jquery

Melaksanakan menu lungsur turun tiga peringkat berdasarkan jquery_jquery

WBOY
WBOYasal
2016-05-16 09:00:082712semak imbas

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>

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.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Penyelesaian kepada kelipan halaman yang disebabkan oleh permintaan tak segerak berdasarkan $.ajax method_jquery JQueryArtikel seterusnya：Penyelesaian kepada kelipan halaman yang disebabkan oleh permintaan tak segerak berdasarkan $.ajax method_jquery JQuery

Artikel berkaitan

Lihat lagi