bootstrap 3 Hide das Hauptmenü, wenn Element mit Untermenü ist klicken und Untermenü anzeigen

Question

Ich möchte nur ein Untermenü anzeigen und ausblenden Sie das Hauptmenü, nachdem Sie auf ein Element im Hauptmenü, das ein Untermenü hat. Der schwierige Teil ist, dass dies nur im mobilen, aber nicht im größeren Bildschirm aktiviert wird. Ich habe nur versucht, ein Plugin oder eine Bibliothek von unten Link und es hatte einen Konflikt irgendwo, dass Menü nicht angezeigt wird. Ich hoffe, du könntest mir einen neuen Weg geben, dies zu tun.

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

Mein Menü sieht wie folgt aus: Hauptmenü angezeigt und wenn ein Element mit Untermenü klicken versteckt es das Hauptmenü und zeigen nur das Untermenü.

<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

Hier ist der einfachste Code

// für den mobilen Bildschirm

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'); 
}) 
} 

Hier ist JSFIDDLE LInk JSFIDDLE, im mobilen Einsatz Chrome zu überprüfen und in Entwicklerkonsole den Navigator Typ verändern und jedem mobilen Gerät