Bir açılırma sınıfına sahip belirli bir menü öğesini tıklayarak navbarın gizlenmesi/daraltılmasının nasıl önlenir?

Question

navbar'ın çökmesini engellemeye çalışıyorum aşağıdaki kodda About Us bölümüne veya Projects bölümüne tıklayın. Bu iki düğme üzerinde event.stopPropagation()'u denedim, ancak jQuery kodu yürütüldüğü zamana kadar, navbar zaten çöktü ve kendini gizler.

<li class="page-scroll"> 
    <a href="#home">Home</a> 
</li> 
<li class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">About Us<span class="caret"></span></a> 
    <ul class="dropdown-menu" role="menu"> 
     <li><a href="aboutus.html">Vision</a></li> 
     <li><a href="team.html">Founding Team</a></li> 
     <!--<li><a href="donors.html">Members</a></li>--> 
    </ul> 
</li> 
<li class="page-scroll"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Projects<span class="caret"></span></a> 
    <ul class="dropdown-menu" role="menu"> 
     <li><a href="sample-campaign - vidya.html">Vidya Vistar</a></li> 
     <li><a href="sample-campaign - safai.html">Safai Abhyaan</a></li> 
     <li><a href="sample-campaign - clothes.html">Clothes Donation</a></li> 
     <li><a href="sample-campaign - food.html">Food Donation</a></li> 
     <li><a href="sample-campaign - onetime.html">Ad Hoc</a></li> 
    </ul> 
</li> 
<li class="page-scroll"> 
    <a href="#events">Events</a> 
</li> 
<li class="page-scroll"> 
    <a href="#gallery">Gallery</a> 
</li> 
<li class="page-scroll"> 
    <a href="#join">Get Involved</a> 
</li> 

nasıl Projects veya About Us düğmeleri tıklayarak üzerinde ( 992px daha az ekran boyutuna) gezinme çubuğu ait Saklanmaktan önlemek için?

Answer 1

Alas yürütmek buldum alt bölümlerin üstbilgileri de dahil olmak üzere tüm düğmelerin tıklatma olayı sırasında çağrılan işlev (About Us ve). Bu, başkası tarafından başlatılan bir projeye devam etmeye çalıştığınızda olur. Ben bunu değiştirdi

$('.navbar li').click(function() { 
    $('.navbar-toggle:visible').click(); 
}); 

:

// Closes the Responsive Menu on Menu Item Click 
$('.toggle-responsive').click(function() { 
    $('.navbar-toggle:visible').click(); 
}); 

Ve çağrıda gereken sınıfları sepecified:

<li class="page-scroll toggle-responsive"> 
    <a href="#home">Home</a> 
</li> 
<li class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">About Us<span class="caret"></span></a> 
    <ul class="dropdown-menu" role="menu"> 
     <li class="toggle-responsive"><a href="aboutus.html">Vision</a></li> 
     <li class="toggle-responsive"><a href="team.html">Founding Team</a></li> 
     <!--<li><a href="donors.html">Members</a></li>--> 
    </ul> 
</li> 
<li class="page-scroll"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Projects<span class="caret"></span></a> 
    <ul class="dropdown-menu" role="menu"> 
     <li class="toggle-responsive"><a href="sample-campaign - vidya.html">Vidya Vistar</a></li> 
     <li class="toggle-responsive"><a href="sample-campaign - safai.html">Safai Abhyaan</a></li> 
     <li class="toggle-responsive"><a href="sample-campaign - clothes.html">Clothes Donation</a></li> 
     <li class="toggle-responsive"><a href="sample-campaign - food.html">Food Donation</a></li> 
     <li class="toggle-responsive"><a href="sample-campaign - onetime.html">Ad Hoc</a></li> 
    </ul> 
</li> 
<li class="page-scroll toggle-responsive"> 
    <a href="#events">Events</a> 
</li> 
<li class="page-scroll toggle-responsive"> 
    <a href="#gallery">Gallery</a> 
</li> 
<li class="page-scroll toggle-responsive"> 
    <a href="#join">Get Involved</a> 
</li> 

Answer 2

Buradan bakabilirsiniz. Biraz zor bir çözüm. İlk ben bootstarp toogle olayı denedim "hide.bs.popover" (Eğer isterseniz, http://getbootstrap.com/javascript/#collapse kontrol edebilirsiniz) Bu yolu yapamazsınız :(

Sadece jquery kullanıyorum Şimdi çalışır. Çözüm tıkladığınızda çok basit "a" ve ardından "li" Yani ben "li" sınıfı sonra ben bu ne olduğu veri toggle nitelik

var elementAbout = $(".dropdown a"); 

elementAbout.click(function() { 
    if($("li.dropdown").hasClass("open")){ 
    elementAbout.removeAttr("data-toggle") 
    } 
}) 

https://jsfiddle.net/sercantimocin/v992z8er/3/

Answer 3

Umut kaldır "açmak" olan kontrol etmek sınıfı "açık" eklemek açık açılan bootstrap Başarmaya çalışıyorsunuz, eventhide.bs.dropdown'u ekleyin ve genellikle etkinlik yayılımınıaracılığıyla durdurdukve preventDefault öğeye herhangi bir çapa veya varsayılan eylem bağlıysa gereklidir. Ekran boyutunu bekleniyor az 992pxif (screen.height < '992') { } gibi bir ekran genişliği için onay/heihgt var olmak ve daha sonra kod geçiyor 4 gün sonra, e.preventDefault(); and e.stopPropagation();

$('.dropdown').on('hide.bs.dropdown', function(e) { 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" /> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script> 
 
<ul class="custom"> 
 
    <li class="page-scroll"> 
 
    <a href="#home">Home</a> 
 
    </li> 
 
    <li class="dropdown"> 
 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">About Us<span class="caret"></span></a> 
 
    <ul class="dropdown-menu" role="menu"> 
 
     <li><a href="aboutus.html">Vision</a> 
 
     </li> 
 
     <li><a href="team.html">Founding Team</a> 
 
     </li> 
 
     <!--<li><a href="donors.html">Members</a></li>--> 
 
    </ul> 
 
    </li> 
 
    <li class="dropdown"> 
 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Projects<span class="caret"></span></a> 
 
    <ul class="dropdown-menu" role="menu"> 
 
     <li><a href="sample-campaign - vidya.html">Vidya Vistar</a> 
 
     </li> 
 
     <li><a href="sample-campaign - safai.html">Safai Abhyaan</a> 
 
     </li> 
 
     <li><a href="sample-campaign - clothes.html">Clothes Donation</a> 
 
     </li> 
 
     <li><a href="sample-campaign - food.html">Food Donation</a> 
 
     </li> 
 
     <li><a href="sample-campaign - onetime.html">Ad Hoc</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="page-scroll"> 
 
    <a href="#events">Events</a> 
 
    </li> 
 
    <li class="page-scroll"> 
 
    <a href="#gallery">Gallery</a> 
 
    </li> 
 
    <li class="page-scroll"> 
 
    <a href="#join">Get Involved</a> 
 
    </li> 
 
</ul>