bootstrap 3 Hide the main menu when item with sub menu is click and show sub menu

Question

I would like to have a sub menu display only and hide the main menu after you click an item in the main menu that has a sub menu. The tricky part is that this will only activate only in mobile but not in bigger screen. I have tried only a plugin or implemented a library from below link and it had a conflict somewhere that menu doesn't show up. I hope you could give me a new way of doing this.

http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/

My menu looks like this: main menu displaying and when click an item with sub menu it hides the main menu and show ONLY the sub menu.

    <div class="navbar navbar-default ">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- <a class="navbar-brand" href="#">
                <img src="assets/img/vivaldi-logo.png" alt="" class="img-responsive" />
            </a> -->
        </div>
        <div class="navbar-collapse collapse ">
            <ul class="nav navbar-nav dl-menu">
                <li>
                    <a href="index.html" class="home">HOME</a>
                </li>
                <li class="dropdown open">
                        <a id="whoweare" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-expanded="true">WHO WE ARE</a>
                        <ul class="dropdown-menu">
                            <img src="assets/img/menutri.png" style="margin-top: -18px; margin-left: 20px;">
                            <li><a href="#">PATIENT FORMS</a></li>
                            <!-- <li class="divider"></li> -->
                            <li><a href="#">FREE CONSULTATION</a></li>
                            <!-- <li class="divider"></li> -->
                            <li><a href="#">INSURANCE</a></li>
                            <!-- <li class="divider"></li> -->
                            <li><a href="#">OUR STORY</a></li>
                            <!-- <li class="divider"></li> -->
                            <li><a href="#">PHYSICIANS</a></li>
                            <!-- <li class="divider"></li> -->
                            <li><a href="#">STAFF</a></li>
                            <!-- <li class="divider"></li> -->
                            <li><a href="#">TESTIMONIALS</a></li>
                            <!-- <li class="divider"></li> -->
                            <li><a href="#" style="border-bottom-width: 0px;">THE OSTEOPATHIC WAY</a></li>
                        </ul>
                </li>
                <li>
                    <a href="blog.html">SERVICES</a>
                </li>
                <li>
                    <a href="contact.html">WELLNESS CENTER</a>
                </li>
                <li>
                    <a href="contact.html">NEWS &#38; EVENTS</a>
                </li>
                <li>
                    <a href="contact.html">CONTACT</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Answer 1

Here is the Simplest code

// for mobile screen

CSS

@media(max-width:768px){
    .dropdown-menu{
          position: absolute;
      top: 0;
      bottom: 0;
      background-color: #ddd;
      min-height: 100%;

    }
}

jquery

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // for mobile users..
    $('.dropdown').click(function(e){
    e.preventDefault()
    $(this).siblings().addClass('hide');
    $(this).find('a.dropdown-toggle').addClass('hide');

})

$('.navbar-toggle').click(function(e){
    e.preventDefault();
    $('.navbar-collapse').find('.hide').removeClass('hide');
})
}

Here is JSFIDDLE LInk JSFIDDLE , to check in mobile use Chrome and in developer console change the navigator type and choose any mobile device