Guru Tutorial: Membuat Menu Collapse di Dalam Menu Dropdown Bootstrap 3

Versi paling baru untuk Twitter Bootstrap sekarang yaitu Twitter Bootstrap v3.2.0 atau bisa disebut bootstrap 3, seperti yang kita ketahui bootstrap sudah beberapa kali melakukan perbaikan bugs dan penggantian dari segi design. Walaupun bootstrap memiliki banyak fitur yang berguna namun bootstrap masih ada beberapa kekurangan, maksud saya "kekurangan" itu jika kita menginginkan untuk menggabungkan 2 fitur atau lebih sekaligus akan mengalami crash (crash disini maksud saya tidak akan bekerja akan terjadi konflik/conflict).

Tutorial pertama saya di jagocoding.com ini sederhana tapi cukup berguna yaitu cara menggabungkan 2 fitur javascript yang disediakan bootstrap 3 yaitu dropdown dan collapse. Latar belakang saya menulis tutorial ini karena kebetulan ada salah satu teman saya menanyakan kepada saya tentang hal ini, dia mencoba untuk membuat menu collapse (accordion) di dalam dopdown bootstrap, kira-kira seperti ini yang teman saya membuatnya :

Kita bisa lihat ada masalah yang fatal untuk kasus di atas, masalahnya yaitu ketika menu dropdown di klik lalu menu collpase di klik/pilih menu dropdown akan langsung tertutup/close. Sayangnya bootstrap sendiri sampai saat ini belum memperbaiki masalah ini padahal penggabungan fitur dari bootstrap akan menghasilkan sesuatu yang baru atau menjadi fitur tambahan.

Jadi solusi nya bagaimana untuk masalah ini?

Karena fitur bootstrap yang kita gunakan merupakan javascript tentu solusinya juga mesti / wajib (fardhu ain) menggunakan javascript juga lebih tepatnya menggunakan framework js yaitu jQuery.

Hal pertama yang kita pikirkan adalah bagaimana supaya ketika menu collapse diklik dropdown tidak tertutup. Untuk dropdown jika kita klik maka dropdown akan menambahkan class "open", kalo kita lihat pada codingannya seperti ini

Jika tidak drodown sebelum dibuka

<div class="dropdown">

<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">fauzi <span class="caret"></span>

</button>

 <ul class="dropdown-menu" role="menu">

  ....

 </ul>

</div>

Jika kita buka dropwdown nya

<div class="dropdown open">

  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">fauzi <span class="caret"></span>

  </button>

  <ul class="dropdown-menu" role="menu">

   ....

  </ul>

</div>

Masalah yang kita hadapi adalah class "open" tersebut hilang ketika menu collapse diklik, tentu kita harus menggunakan jQuery supaya dropdown tetap memiliki class "open" ketika menu collapse diklik.

Kita sudah mempunyai code HTML nya yang sudah saya buat di jsfiddle demo nya

<div class="dropdown">

    <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">fauzi <span class="caret"></span>

    </button>

    <ul class="dropdown-menu" role="menu">

        <li role="presentation" class="have-child">

            <a role="menuitem" tabindex="-1" data-toggle="collapse" data-parent="#accordion" href="#profile">Profile Page

            </a>

                <ul id="profile" class="panel-collapse collapse">

                    <li><a href="profile">Visitor Message</a>

                    </li>

                    <li><a href="about-me">About Me</a>

                    </li>

                </ul>

        </li>

        <li role="presentation" class="have-child">

            <a role="menuitem" tabindex="-1" data-toggle="collapse" data-parent="#accordion" href="#activities">Activities

            </a>

                <ul id="activities" class="panel-collapse collapse">

                    <li><a href="posts">All Post</a>

                    </li>

                    <li><a href="articles">All Article</a>

                    </li>

                </ul>

        </li>

        <li role="presentation" class="have-child">

            <a role="menuitem" tabindex="-1" data-toggle="collapse" data-parent="#accordion" href="#pm">Private Message

            </a>

                <ul id="pm" class="panel-collapse collapse">

                    <li><a href="inbox">Inbox</a>

                    </li>

                    <li><a href="outbox">Outbox</a>

                    </li>

                </ul>

        </li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="logout">Logout

            </a></li>

    </ul>

</div>

Langkah pertama yaitu membuat script jQuery untuk menambahkan class "open" ketika menu collapse diklik, pada setiap link menu collapse kita punya attributedata-toggle="collapse", attribute tersebut bisa dijadikan selector untuk dieksekusi, kira-kira seperti inilah kalo diimplementasikan ke script :

$(document).ready(function () {

  /* jika menu collapse diklik */

  $('a[data-toggle="collapse"]').click(function(){

   /* menghentikan proses fitur default collapse jika kita klik menu collapse */

   event.stopPropagation();

   /* aksi default dari event ketika link diklik (misal : tidak akan menampilkan data href pada  url */

   event.preventDefault();

   /* mencari class dropdown menggunakan jQuery .closest() dan menyinpannya di variable drop */

   var drop = $(this).closest(".dropdown");

   /* menseleksi variable drop dan menambahkan class open menggunakan jQuery .addClass() */

   $(drop).addClass("open");

 <br>  });

});

dropdown sudah bekerja dan tidak mengalami close akan tetapi menu collapse tidak bekerja itu karena fitur default collapse prosesnya dihentikan dengan menggunakan even.StopPropagation() maka pada langkah kedua kita harus menambahkan bootstrap collapse secara manual

/* menutup collapse yang terbuka */

$('.collapse.in').collapse('hide');

/* mengambil data attribute href menu yang diklik dan menyimpannya di variable col_id */

var col_id = $(this).attr("href");

/* menseleksi variable col_id dengan collapse */

$(col_id).collapse('toggle');