Jak zapobiec ukrywaniu/zwijaniu navbada po kliknięciu określonego elementu menu, który ma klasę rozwijaną?

Question

Próbuję zapobiec zawaleniu się paska nawigacyjnego po kliknięciu sekcji About Us lub sekcji Projects w poniższym kodzie. Próbowałem na tych dwóch przyciskach event.stopPropagation(), ale gdy do czasu wykonania kodu jQuery, navbar już się zapadł i ukrył.

<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> 

Jak zapobiec ukrywanie paska nawigacyjnego (o przekątnej ekranu mniejszej niż 992px) na kliknięcie Projects lub About Us przycisków?

Answer 1

niestety, po 4 dniach przeżywa kodu, znalazłem funkcja, która została wywołana podczas zdarzenia kliknięcia wszystkich przycisków, w tym nagłówków podsekcji (About Us i Projects). Dzieje się tak, gdy próbujesz kontynuować projekt, który został rozpoczęty przez kogoś innego. Tutaj był kod:

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

zmieniłem go na adres:

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

I sepecified klas, gdzie powinien być wezwani:

<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

Tutaj możesz sprawdzić. Trochę skomplikowane rozwiązanie. Najpierw wypróbowałem zdarzenie bootstarp toogle "hide.bs.popover" (jeśli chcesz, możesz sprawdzić http://getbootstrap.com/javascript/#collapse) nie mogę zrobić w ten sposób :(

Używam tylko jquery Teraz to działa. Rozwiązanie jest bardzo proste po kliknięciu „a” bootstrap otwarty rozwijaną następnie dodać klasę „otwarty” na „li”, więc sprawdzone „li” klasa „otwarty”, a następnie usunąć dane-toogle atrybut

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

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

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

Answer 3

nadzieję, że to, co próbujesz osiągnąć, dodaj eventhide.bs.dropdown i zazwyczaj zatrzymujemy propagację zdarzenia przez event.stopPropagation(); i preventDefault są potrzebne, jeśli jakaś kotwica lub akcja domyślna jest związana z elementem. Spodziewając rozmiar ekranu powinna być mniejsza niż 992px już czek na szerokości ekranu/heihgt jak if (screen.height < '992') { } a następnie wykonać 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>